Vue项目中使用axios下载Excel文件报错损坏如何解决？

问题根因 #

你当前代码的问题核心是和后端返回的内容格式不匹配，同时缺少blob类型相关的配置，导致下载的文件被错误编码损坏，分两种场景修复：

场景1：后端接口确实返回Excel文件的可访问URL

如果你把res.data返回的URL直接粘贴到浏览器地址栏，可以正常下载并打开Excel，那问题是跨域场景下a标签的download属性失效，修复代码如下：

reportExcel(val) {
  axios
    .get("/algn/api/report/" + val)
    .then(async (res) => {
      const fileUrl = res.data;
      // 以blob格式请求静态文件
      const fileRes = await axios.get(fileUrl, {
        responseType: 'blob'
      });
      // 生成临时blob地址
      const url = window.URL.createObjectURL(new Blob([fileRes.data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      }));
      const a = document.createElement("a");
      a.href = url;
      a.download = fileUrl.split("/").pop();
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      // 释放内存
      window.URL.revokeObjectURL(url);
    })
    .catch((error) => {
      console.log(error);
    });
}

场景2：后端接口直接返回Excel二进制流

如果你把res.data的内容粘贴到地址栏根本无法访问，说明你误解了后端返回的内容，本质是接口直接返回了文件流，你没有指定responseType导致axios把二进制流错误转码为字符串，修复代码如下：

reportExcel(val) {
  axios
    .get("/algn/api/report/" + val, {
      // 关键配置：指定响应类型为二进制blob
      responseType: 'blob'
    })
    .then((res) => {
      const url = window.URL.createObjectURL(new Blob([res.data], {
        // 明确指定Excel文件的MIME类型
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      }));
      const a = document.createElement("a");
      a.href = url;
      a.download = 'data.xlsx';
      // 如需使用后端返回的文件名，需要后端配置Access-Control-Expose-Headers: Content-Disposition
      // 然后从res.headers['content-disposition']中提取文件名即可
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    })
    .catch((error) => {
      console.log(error);
    });
}

额外排查点 #

• 打开浏览器控制台网络面板，确认接口的响应类型、响应内容是否符合预期
• 如果是静态URL跨域场景，可让运维在静态资源服务器配置Content-Disposition: attachment; filename="xxx.xlsx"响应头，也可以直接触发正常下载

内容的提问来源于stack exchange，提问作者json