前端实现获取后端返回的文件流并下载

前端实现获取后端返回的文件流并下载

• 方法一：使用Axios实现文件流下载
  
• 
  
  
  
  • 
    
    
    
    • 长处
      
    • 缺点
      
    
    
  
  
• 方法二：使用封装的Request工具实现文件流下载
  
• 
  
  
  
  • 
    
    
    
    • 长处
      
    • 缺点
      
    
    
  
  
• 方法三：直接通过URL跳转下载
  
• 
  
  
  
  • 
    
    
    
    • 长处
      
    • 缺点
      
    
    
  
  
• 结论
  

在前端开发中，偶然须要从后端获取文件流，并将其下载到当地。本文先容怎样在前端实现此功能的差异的实现方法，并分析其优缺点
方法一：使用Axios实现文件流下载

使用Axios实现文件流下载的方法，本人亲测可以实现

1. import axios from 'axios';
2. import { getToken } from '@/utils/auth'
4. handleExport() {
5.   // 接口调用获取文件
6.   axios({
7.     method: 'get',
8.     responseType: 'blob', // 指定响应类型为blob
9.     url: this.GLOBAL.baseURL + '/api/v1/business/user/export',
10.     data: this.queryParams, // 导入文件一般都用FormData格式数据
11.     headers: { 'Authorization': 'Bearer ' + getToken() } // 传递token进行身份验证
12.   }).then(res => {
13.     if (res.code === 200) {
14.       // 导入成功
15.       this.downloadBinaryFile(res.data, '导入失败后下载的报错文件')
16.     } else {
17.       // 输出失败信息
18.     }
19.   }).catch(error => {
20.     console.error('下载失败', error);
21.   });
22. },
23.    
24. /**
25. * 将二进制文件下载到本地，保存为excel文件
26. * @param {*} binFile 二进制文件流
27. * @param {*} fileName 下载后的文件名
28. * @param {*} blobType 文件格式，默认为 "application/vnd.ms-excel"
29. */
30. downloadBinaryFile(binFile, fileName, blobType = "application/vnd.ms-excel") {
31.   // 创建 Blob 对象，包含二进制文件流和文件类型
32.   const blobObj = new Blob([binFile], { type: blobType });
33.   
34.   // 创建下载链接元素
35.   const downloadLink = document.createElement('a');
36.   
37.   // 处理不同浏览器的 URL 兼容性
38.   let url = window.URL || window.webkitURL;
39.   url = url.createObjectURL(blobObj); // 创建文件 URL
40.   
41.   // 设置下载链接属性
42.   downloadLink.href = url;
43.   downloadLink.download = fileName;
44.   
45.   // 将下载链接添加到文档中并触发点击事件
46.   document.body.appendChild(downloadLink);
47.   downloadLink.click();
48.   
49.   // 移除下载链接并释放 URL 对象
50.   document.body.removeChild(downloadLink);
51.   window.URL.revokeObjectURL(url);
52. }

复制代码

实现的结果

长处

• 支持转达Token举行身份验证，安全性较高
  
• 支持POST哀求，可以将参数放在哀求体中，制止URL长度限定及参数袒露
  

缺点

• 实现相对复杂，须要手动创建和管理Blob对象及下载链接
  

方法二：使用封装的Request工具实现文件流下载

接下来先容使用封装的Request工具实现文件流下载的方法

1. import request from '@/utils/request'
3. // 日志管理收藏、浏览、下载导出接口
4. export function exportUserOperateAdmin(data, headers) {
5.   return request({
6.     url: '/business/user/export',
7.     method: 'get',
8.     data: data,
9.     headers: headers
10.   })
11. }
13. // 调用导出接口
14. exportUserOperateAdmin(this.queryParams, { responseType: 'blob' }).then(
15.   response => {
16.     console.log(response)
17.     const url = window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接
18.     const link = document.createElement('a')
19.     link.href = url
20.     link.download = '全文导入模板.xlsx' // 设置文件名
21.     document.body.appendChild(link)
22.     link.click() // 触发下载
23.     document.body.removeChild(link) // 下载后移除元素
24.   }
25. ).catch(error => {
26.   console.error('下载失败', error)
27.   this.loading = false // 停止加载，隐藏加载状态
28. })

复制代码

长处

• 封装后的Request工具调用简单，代码更简便
  
• 支持转达Token举行身份验证，安全性较高
  

缺点

• 实现相对简单，但仍需手动处理处罚Blob对象及下载链接
  

方法三：直接通过URL跳转下载

末了先容直接通过URL跳转实现文件下载的方法

1. const baseurl = this.GLOBAL.baseURL
2. // 拼接上导出的地址，如果接口还需要其他参数，都可以直接拼接上
3. let url = baseurl + '/api/v1/business/user/export';
4. console.log(url)
5. alert(url)
6. // 第二个参数'_self'表示在当前页下载，不打开新的页面
7. window.open(url, '_self')

复制代码

长处

• 实现简单，不须要处理处罚Blob对象及下载链接
  
• 恰当下载无需身份验证或参数简单的文件
  

缺点

• 无法转达Token举行身份验证，安全性较低
  
• 参数放在URL中不安全，且大概会导致URL过长
  
• 处理处罚中文参数大概会出现乱码题目
  

结论

以上三种方法各有优缺点，现实开发中可以根据具体需求选择符合的方法。
如果须要转达Token举行身份验证并确保下载安全性，保举使用方法一或方法二
如果只是简单下载无需验证的文件，可以思量使用方法三