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

news2024/10/21 17:39:01

前言：从后端获取表格等文件流并在前端触发下载的功能是个常用功能，方法很多，这里我们采用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);
},

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

期望以 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 函数来处理下载文件，它接受两个参数 file 和 fileName，分别表示要下载的文件内容和文件名。

首先，代码创建了一个 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.实现效果

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