前端接收后端传递的表格文件流,通过a标签下载excel文件

前言: 从后端获取表格等文件流并在前端触发下载的功能是个常用功能,方法很多,这里我们采用Blob 对象和 <a> 标签来实现文件下载。

我这里实现的是列表数据可选并导出,选择需要导出的字段,发送给后端,请求成功后后端返回文件流,前端通过a链接下载,导出成功,文件可查看。

1.重要部分代码如下

复制代码
// 触发请求,可以是按钮,也可以在当前界面直接调用接口
exprotData(){
// 数据
  let data = {

  };
// 接口
  apijs.exportData(data).then(res => {
    console.log("execl",res.data);
    this.handleDownloadFile(res.data,'名称.xlsx')
  })
},


// 处理文件并下载
handleDownloadFile(){
  const blob = new Blob([file],{
    type: "application/vnd.ms-excel;charset=UTF-8"
  });
  const a = document.createElement("a");
  const objectUrl =  window.URL.createObjectURL(blob);
  a.setAttribute("href",objectUrl);
  a.setAttribute("download",fileName);
  a.click();
  URL.revokeObjectURL(a.href);
},

接口指定响应的类型为 arraybufferarraybuffer 是一种用于表示通用的、固定长度的原始二进制数据缓冲区的方式。

期望以 arraybuffer 形式接收响应数据。在处理文件下载(如 Excel 文件、PDF 文件等)时非常有用,因为文件内容通常以二进制形式传输。

复制代码
//接口  
getData(data){
    return axiosApi(
      {
        method: "POST",
        url: `接口地址`,
        data,
        responseType: "arraybuffer"
      }
    )
  }

2.文件处理代码解析

复制代码
// 处理文件并下载
handleDownloadFile(){
  const blob = new Blob([file],{
    type: "application/vnd.ms-excel;charset=UTF-8"
  });
  const a = document.createElement("a");
  const objectUrl =  window.URL.createObjectURL(blob);
  a.setAttribute("href",objectUrl);
  a.setAttribute("download",fileName);
  a.click();
  URL.revokeObjectURL(a.href);
},

handleDownloadFile 函数来处理下载文件,它接受两个参数 filefileName,分别表示要下载的文件内容和文件名。

首先,代码创建了一个 Blob 对象,Blob 是一种表示二进制数据的对象。Blob([file], { type: "application/vnd.ms-excel;charset=UTF-8" }) 创建了一个包含 file 内容的 Blob 对象,并指定了 MIME 类型为 "application/vnd.ms-excel;charset=UTF-8"。

创建了一个 <a> 标签,使用 window.URL.createObjectURL(blob) 生成了一个 URL,该 URL 指向了上面创建的 Blob 对象。

设置了 <a> 标签的 href 属性为上述生成的 URL,以及 download 属性为传入的 fileName,这样就指定了文件下载的链接和文件名。

调用了 <a> 标签的 click 方法,实现了模拟用户点击下载链接的操作。

调用 URL.revokeObjectURL(a.href) 来释放之前创建的 URL 对象,以便释放内存和避免内存泄漏。

3.实现效果

控制台打印出了接收的数据,接收到了文件流。

直接下载完成

打开查看表格文件

若文章对你有帮助,点个赞吧!

相关推荐
翻滚吧键盘22 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹28 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解2 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端