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

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

在前端开发中，有时需要从后端获取文件流，并将其下载到本地。本文介绍如何在前端实现此功能的不同的实现方法，并分析其优缺点

方法一：使用Axios实现文件流下载

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

import axios from'axios';import{ getToken }from'@/utils/auth'handleExport(){// 接口调用获取文件axios({method:'get',responseType:'blob',// 指定响应类型为bloburl:this.GLOBAL.baseURL +'/api/v1/business/user/export',data:this.queryParams,// 导入文件一般都用FormData格式数据headers:{'Authorization':'Bearer '+getToken()}// 传递token进行身份验证}).then(res=>{if(res.code ===200){// 导入成功this.downloadBinaryFile(res.data,'导入失败后下载的报错文件')}else{// 输出失败信息}}).catch(error=>{
    console.error('下载失败', error);});},/**
 * 将二进制文件下载到本地，保存为excel文件
 * @param {*} binFile 二进制文件流
 * @param {*} fileName 下载后的文件名
 * @param {*} blobType 文件格式，默认为 "application/vnd.ms-excel"
 */downloadBinaryFile(binFile, fileName, blobType ="application/vnd.ms-excel"){// 创建 Blob 对象，包含二进制文件流和文件类型const blobObj =newBlob([binFile],{type: blobType });// 创建下载链接元素const downloadLink = document.createElement('a');// 处理不同浏览器的 URL 兼容性let url = window.URL|| window.webkitURL; 
  url = url.createObjectURL(blobObj);// 创建文件 URL// 设置下载链接属性
  downloadLink.href = url;
  downloadLink.download = fileName;// 将下载链接添加到文档中并触发点击事件
  document.body.appendChild(downloadLink);
  downloadLink.click();// 移除下载链接并释放 URL 对象
  document.body.removeChild(downloadLink);
  window.URL.revokeObjectURL(url);}

实现的效果

优点

• 支持传递Token进行身份验证，安全性较高
• 支持POST请求，可以将参数放在请求体中，避免URL长度限制及参数暴露

缺点

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

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

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

import request from'@/utils/request'// 日志管理收藏、浏览、下载导出接口exportfunctionexportUserOperateAdmin(data, headers){returnrequest({url:'/business/user/export',method:'get',data: data,headers: headers
  })}// 调用导出接口exportUserOperateAdmin(this.queryParams,{responseType:'blob'}).then(response=>{
    console.log(response)const url = window.URL.createObjectURL(newBlob([response.data]))// 创建下载链接const link = document.createElement('a')
    link.href = url
    link.download ='全文导入模板.xlsx'// 设置文件名
    document.body.appendChild(link)
    link.click()// 触发下载
    document.body.removeChild(link)// 下载后移除元素}).catch(error=>{
  console.error('下载失败', error)this.loading =false// 停止加载，隐藏加载状态})

优点

• 封装后的Request工具调用简单，代码更简洁
• 支持传递Token进行身份验证，安全性较高

缺点

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

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

最后介绍直接通过URL跳转实现文件下载的方法

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

优点

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

缺点

• 无法传递Token进行身份验证，安全性较低
• 参数放在URL中不安全，且可能会导致URL过长
• 处理中文参数可能会出现乱码问题

结论

以上三种方法各有优缺点，实际开发中可以根据具体需求选择合适的方法。

如果需要传递Token进行身份验证并确保下载安全性，推荐使用方法一或方法二

如果只是简单下载无需验证的文件，可以考虑使用方法三