在前端，处理文件下载通常涉及到接受一个 文件流（Blob 或者 ArrayBuffer），然后将它转换成可以下载的链接。以下是实现前端文件下载并接受文件流的一些常见方法。

1. 使用 Blob 和 URL.createObjectURL 创建下载链接

假设后端返回的是一个文件流（比如

1. Blob

复制代码

），你可以在前端通过以下步骤创建一个文件下载链接。

例子：使用 Blob 创建文件下载

1. // 假设你从后端获取到文件流（Blob）
   
2. fetch('/path/to/your/file')
   
3.   .then(response => response.blob())  // 获取文件流（Blob）
   
4.   .then(blob => {
   
5.     // 创建一个临时的 URL 来指向这个 Blob
   
6.     const url = window.URL.createObjectURL(blob);
   
7. 
   
8.     // 创建一个下载链接
   
9.     const link = document.createElement('a');
   
10.     link.href = url;
    
11.     link.download = 'filename.ext'; // 设置下载文件的名称
    
12. 
    
13.     // 模拟点击下载
    
14.     link.click();
    
15. 
    
16.     // 释放 URL 对象
    
17.     window.URL.revokeObjectURL(url);
    
18.   })
    
19.   .catch(error => {
    
20.     console.error('File download failed:', error);
    
21.   });

复制代码

2. 通过 FileReader 处理 ArrayBuffer 类型文件流

如果后端返回的是

1. ArrayBuffer

复制代码

（二进制文件数据），你可以使用

1. FileReader

复制代码

将其转换为

1. Blob

复制代码

对象，然后进行下载。

例子：处理

1. ArrayBuffer

复制代码

文件流

1. fetch('/path/to/your/file')
   
2.   .then(response => response.arrayBuffer())  // 获取文件流（ArrayBuffer）
   
3.   .then(arrayBuffer => {
   
4.     // 将 ArrayBuffer 转换为 Blob
   
5.     const blob = new Blob([arrayBuffer]);
   
6. 
   
7.     // 创建一个临时的 URL 来指向这个 Blob
   
8.     const url = window.URL.createObjectURL(blob);
   
9. 
   
10.     // 创建一个下载链接
    
11.     const link = document.createElement('a');
    
12.     link.href = url;
    
13.     link.download = 'filename.ext'; // 设置下载文件的名称
    
14. 
    
15.     // 模拟点击下载
    
16.     link.click();
    
17. 
    
18.     // 释放 URL 对象
    
19.     window.URL.revokeObjectURL(url);
    
20.   })
    
21.   .catch(error => {
    
22.     console.error('File download failed:', error);
    
23.   });

复制代码

3. 使用 axios 和 responseType: 'blob' 处理文件下载

如果你使用的是

1. axios

复制代码

来进行请求，可以通过设置

1. responseType

复制代码

为

1. blob

复制代码

来接收文件流。这是处理文件流下载的一种常见方法。

例子：使用 axios 处理文件流下载

1. import axios from 'axios';
   
2. 
   
3. axios.get('/path/to/your/file', { responseType: 'blob' })
   
4.   .then(response => {
   
5.     const blob = response.data;
   
6. 
   
7.     // 创建一个临时的 URL 来指向这个 Blob
   
8.     const url = window.URL.createObjectURL(blob);
   
9. 
   
10.     // 创建一个下载链接
    
11.     const link = document.createElement('a');
    
12.     link.href = url;
    
13.     link.download = 'filename.ext'; // 设置下载文件的名称
    
14. 
    
15.     // 模拟点击下载
    
16.     link.click();
    
17. 
    
18.     // 释放 URL 对象
    
19.     window.URL.revokeObjectURL(url);
    
20.   })
    
21.   .catch(error => {
    
22.     console.error('File download failed:', error);
    
23.   });

复制代码

4. 处理带有 Content-Disposition 的下载

在某些情况下，后端会发送带有

1. Content-Disposition

复制代码

HTTP 头的响应，这表示文件应该以附件形式下载。在这种情况下，你通常不需要进行任何特别的操作，浏览器会自动处理文件的下载，但你仍然可以通过 JavaScript 强制进行下载。

例子：使用 axios 强制文件下载

1. axios({
   
2.   url: '/path/to/your/file',
   
3.   method: 'GET',
   
4.   responseType: 'blob', // 请求文件流
   
5. })
   
6.   .then(response => {
   
7.     const blob = response.data;
   
8. 
   
9.     // 获取文件名，通常从响应头获取
   
10.     const contentDisposition = response.headers['content-disposition'];
    
11.     const filename = contentDisposition
    
12.       ? contentDisposition.split('filename=')[1].replace(/"/g, '')
    
13.       : 'default_filename.ext';
    
14. 
    
15.     // 创建一个临时的 URL 来指向这个 Blob
    
16.     const url = window.URL.createObjectURL(blob);
    
17. 
    
18.     // 创建一个下载链接
    
19.     const link = document.createElement('a');
    
20.     link.href = url;
    
21.     link.download = filename; // 设置下载文件的名称
    
22. 
    
23.     // 模拟点击下载
    
24.     link.click();
    
25. 
    
26.     // 释放 URL 对象
    
27.     window.URL.revokeObjectURL(url);
    
28.   })
    
29.   .catch(error => {
    
30.     console.error('File download failed:', error);
    
31.   });

复制代码

5. 错误处理和文件流超时

在进行文件下载时，你还需要考虑错误处理和超时设置：

1. fetch('/path/to/your/file', { timeout: 5000 })  // 设置超时为 5 秒
   
2.   .then(response => {
   
3.     if (!response.ok) {
   
4.       throw new Error('Network response was not ok');
   
5.     }
   
6.     return response.blob();
   
7.   })
   
8.   .then(blob => {
   
9.     // 处理 Blob 文件流并下载
   
10.     const url = window.URL.createObjectURL(blob);
    
11.     const link = document.createElement('a');
    
12.     link.href = url;
    
13.     link.download = 'filename.ext';
    
14.     link.click();
    
15.     window.URL.revokeObjectURL(url);
    
16.   })
    
17.   .catch(error => {
    
18.     console.error('File download failed:', error);
    
19.   });

复制代码

总结

• Blob 文件流：通过
  1. Blob

  复制代码
  和
  1. URL.createObjectURL

  复制代码
  可以轻松实现文件流下载。
  
• ArrayBuffer 文件流：可以通过
  1. ArrayBuffer

  复制代码
  转换为
  1. Blob

  复制代码
  后再下载。
  
• Axios 下载：通过设置
  1. responseType: 'blob'

  复制代码
  ，可以使用
  1. axios

  复制代码
  处理文件流下载。
  
• Content-Disposition：某些响应可能会通过
  1. Content-Disposition

  复制代码
  头强制文件下载，你可以根据这个头来提取文件名并下载文件。
  

使用这些方法，你可以轻松实现前端接受文件流并提供文件下载功能。如果后端返回的是大文件，确保进行适当的错误处理、超时设置等，以提高用户体验。
到此这篇关于前端下载文件时如何后端返回的文件流一些常见方法的文章就介绍到这了,更多相关前端下载文件后端返回文件流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339559308.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！