快捷導(dǎo)航

前端下載文件時(shí)如何后端返回的文件流一些常見(jiàn)方法

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

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

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);
  });

總結(jié)

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