前端下載文件時如何后端返回的文件流一些常見方法

更新時間：2025年04月14日 10:53:58 作者：瘋狂的沙粒

這篇文章主要介紹了前端下載文件時如何后端返回的文件流一些常見方法,包括使用Blob和URL.createObjectURL創(chuàng)建下載鏈接,以及處理帶有Content-Disposition的下載,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

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

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

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

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

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

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

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

2. 通過 FileReader 處理 ArrayBuffer 類型文件流

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

例子：處理 `ArrayBuffer` 文件流

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

    // 創(chuàng)建一個臨時的 URL 來指向這個 Blob
    const url = window.URL.createObjectURL(blob);

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

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

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

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

如果你使用的是 axios 來進行請求，可以通過設置 responseType 為 blob 來接收文件流。這是處理文件流下載的一種常見方法。

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

import axios from 'axios';

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

    // 創(chuàng)建一個臨時的 URL 來指向這個 Blob
    const url = window.URL.createObjectURL(blob);

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

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

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

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

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

例子：使用 axios 強制文件下載

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

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

    // 創(chuàng)建一個臨時的 URL 來指向這個 Blob
    const url = window.URL.createObjectURL(blob);

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

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

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

5. 錯誤處理和文件流超時

在進行文件下載時，你還需要考慮錯誤處理和超時設置：

fetch('/path/to/your/file', { timeout: 5000 })  // 設置超時為 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);
  });

總結

Blob 文件流：通過 Blob 和 URL.createObjectURL 可以輕松實現(xiàn)文件流下載。
ArrayBuffer 文件流：可以通過 ArrayBuffer 轉換為 Blob 后再下載。
Axios 下載：通過設置 responseType: 'blob'，可以使用 axios 處理文件流下載。
Content-Disposition：某些響應可能會通過 Content-Disposition 頭強制文件下載，你可以根據(jù)這個頭來提取文件名并下載文件。