快捷導(dǎo)航

JavaScrip實(shí)現(xiàn)前端文件下載并接收文件流

更新時(shí)間：2024年12月19日 09:16:46 作者：瘋狂的沙粒

在前端,處理文件下載通常涉及到接收一個(gè)文件流,本文為大家整理了前端文件下載并接受文件流的一些常見(jiàn)方法,有需要的小伙伴可以參考一下

1. 使用 Blob 和 URL.createObjectURL 創(chuàng)建下載鏈接

假設(shè)后端返回的是一個(gè)文件流（比如 Blob），你可以在前端通過(guò)以下步驟創(chuàng)建一個(gè)文件下載鏈接。

例子：使用 Blob 創(chuàng)建文件下載

// 假設(shè)你從后端獲取到文件流（Blob）
fetch('/path/to/your/file')
  .then(response => response.blob())  // 獲取文件流（Blob）
  .then(blob => {
    // 創(chuàng)建一個(gè)臨時(shí)的 URL 來(lái)指向這個(gè) Blob
    const url = window.URL.createObjectURL(blob);

    // 創(chuàng)建一個(gè)下載鏈接
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.ext'; // 設(shè)置下載文件的名稱

    // 模擬點(diǎn)擊下載
    link.click();

    // 釋放 URL 對(duì)象
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('File download failed:', error);
  });

2. 通過(guò) FileReader 處理 ArrayBuffer 類型文件流

如果后端返回的是 ArrayBuffer（二進(jìn)制文件數(shù)據(jù)），你可以使用 FileReader 將其轉(zhuǎn)換為 Blob 對(duì)象，然后進(jìn)行下載。

例子：處理 ArrayBuffer 文件流

fetch('/path/to/your/file')
  .then(response => response.arrayBuffer())  // 獲取文件流（ArrayBuffer）
  .then(arrayBuffer => {
    // 將 ArrayBuffer 轉(zhuǎn)換為 Blob
    const blob = new Blob([arrayBuffer]);

    // 創(chuàng)建一個(gè)臨時(shí)的 URL 來(lái)指向這個(gè) Blob
    const url = window.URL.createObjectURL(blob);

    // 創(chuàng)建一個(gè)下載鏈接
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.ext'; // 設(shè)置下載文件的名稱

    // 模擬點(diǎn)擊下載
    link.click();

    // 釋放 URL 對(duì)象
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('File download failed:', error);
  });

3. 使用 axios 和 responseType: 'blob' 處理文件下載

如果你使用的是 axios 來(lái)進(jìn)行請(qǐng)求，可以通過(guò)設(shè)置 responseType 為 blob 來(lái)接收文件流。這是處理文件流下載的一種常見(jiàn)方法。

例子：使用 axios 處理文件流下載

import axios from 'axios';

axios.get('/path/to/your/file', { responseType: 'blob' })
  .then(response => {
    const blob = response.data;

    // 創(chuàng)建一個(gè)臨時(shí)的 URL 來(lái)指向這個(gè) Blob
    const url = window.URL.createObjectURL(blob);

    // 創(chuàng)建一個(gè)下載鏈接
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.ext'; // 設(shè)置下載文件的名稱

    // 模擬點(diǎn)擊下載
    link.click();

    // 釋放 URL 對(duì)象
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('File download failed:', error);
  });

4. 處理帶有 Content-Disposition 的下載

在某些情況下，后端會(huì)發(fā)送帶有 Content-Disposition HTTP 頭的響應(yīng)，這表示文件應(yīng)該以附件形式下載。在這種情況下，你通常不需要進(jìn)行任何特別的操作，瀏覽器會(huì)自動(dòng)處理文件的下載，但你仍然可以通過(guò) JavaScript 強(qiáng)制進(jìn)行下載。

例子：使用 axios 強(qiáng)制文件下載

axios({
  url: '/path/to/your/file',
  method: 'GET',
  responseType: 'blob', // 請(qǐng)求文件流
})
  .then(response => {
    const blob = response.data;

    // 獲取文件名，通常從響應(yīng)頭獲取
    const contentDisposition = response.headers['content-disposition'];
    const filename = contentDisposition
      ? contentDisposition.split('filename=')[1].replace(/"/g, '')
      : 'default_filename.ext';

    // 創(chuàng)建一個(gè)臨時(shí)的 URL 來(lái)指向這個(gè) Blob
    const url = window.URL.createObjectURL(blob);

    // 創(chuàng)建一個(gè)下載鏈接
    const link = document.createElement('a');
    link.href = url;
    link.download = filename; // 設(shè)置下載文件的名稱

    // 模擬點(diǎn)擊下載
    link.click();

    // 釋放 URL 對(duì)象
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('File download failed:', error);
  });

5. 錯(cuò)誤處理和文件流超時(shí)

在進(jìn)行文件下載時(shí)，你還需要考慮錯(cuò)誤處理和超時(shí)設(shè)置：

fetch('/path/to/your/file', { timeout: 5000 })  // 設(shè)置超時(shí)為 5 秒
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then(blob => {
    // 處理 Blob 文件流并下載
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'filename.ext';
    link.click();
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('File download failed:', error);
  });