前端下载二进制流文件

写校友录小程序的时候需要导出所有校友卡的表格，后端返回二进制流文件：

接收的时候，需要对axios请求和数据处理都做相应处理：

请求：

//校友卡
// 校友卡导出
export function getexport(data) {
  return request({
    url: prefix + "/member/card/export",
    headers: {
      isToken: false,
    },
    method: "get",
    data: data,
    // 下载二进制流文件需要这个参数
    responseType: "arraybuffer",
  });
}

此处特别要注意 responseType: "arraybuffer"这个参数，没有的话下载的文件无法打开，我在这卡了很久。

请求之后的数据处理：

   getexport().then((res) => {
        console.log(res);
        //1.我们需要通过blob对象来处理，需要模拟一个<a>标签来提供下载链接
        const elink = document.createElement("a");
        elink.style.display = "none";
        //2.blob是二进制大对象，接受后台返回的数据流，导出数据
        const blob = new Blob([res.data], {
        // 下载文件的格式，也可以不写这个参数，而是在elink.download = "校友卡"; 这里写
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        //3.创建一个url 对象，并将blob实例作为参数传入，这样href的值就是以blob开头的一个文件流下载链接,类似于href="blob:http://127.0.0.1xxxxx"
        const blobUrl = window.URL.createObjectURL(blob);
        elink.href = blobUrl;
        elink.download = "校友卡"; //下载后的文件名
        //4.将a标签加入body,并手动点击触发下载
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
      });

是用blob格式下载。

参考文章

前端下载普通文件与二进制流文件 - 掘金

Web 开发中 Blob 与 FileAPI 使用简述 - 掘金