后端返回数据流，前端接收Excel表格失败

卡卡瓦夏

已于 2024-04-10 15:06:30 修改

阅读量429

点赞数 7

文章标签： javascript 前端 vue

于 2024-03-06 10:27:23 首次发布

本文链接：https://blog.csdn.net/IDycy/article/details/136498406

版权

如标题，后端接口返回数据流，前端接收时显示文件已损坏，加上responseType: "arraybuffer",即可

// 前端演示代码
// 问题的原因就是responseType，一定要加上！！！
// 问题的原因就是responseType，一定要加上！！！
// 问题的原因就是responseType，一定要加上！！！
axios.get(
      `/xxx/xxx?xxx=${xxx}`,
      {
        baseURL: "xxx",
        timeout: 10000,
        headers: {
          "Content-Type": "application/json;charset=UTF-8;",
        },
        responseType: "arraybuffer", // 或者blob
      }
    )
    .then((res) => {
      let blob = new Blob([res], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      }); 
      let url = window.URL.createObjectURL(blob); //将对象转化为链接
      let a = document.createElement("a");
      // 下载链接
      a.href = url;
      a.download = "导出数据.xlsx";
      document.body.appendChild(a);
      // 点击a标签，进行下载
      a.click();
      // 移除元素
      document.body.removeChild(a);
    });

（更新，再次使用这个功能的时候突然又报错：文件已损坏，后来排查一通发现，接口传参方式记得要改成get啊！）