vue 使用blob下载文件，打开文件，文件是损毁的，求解决办法！

Question

文件下载， 我已经设置了responseType:'blob'， 查看打印台数据是blob格式， 下载下来以后打开文件时 word文件打开提示文件损坏，并且显示乱码， excel文件打开内容是空， 图片打开是损毁的。

async handleClick(row) {

  let res = await download(
    { datumId: row.datumId },
    { responseType: "blob" }
  );
  let data = res.data;
  console.log(res);
  const blob = new Blob([data], {
    type: "application/octet-stream",
  });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.setAttribute("download", row.fileName); // 设置下载文件名称
  document.body.appendChild(link);
  link.click();
  document.body.appendChild(link);
}

网上有说mock有影响，可我删了依然没有用

Answer 1

我也遇到了同样的问题，首先，后端链接在浏览器里打开能够直接下载，然后通过vue请求到blob数据之后下载打开就会说文件已损坏！查了好多办法也不行该设置的responseType: "blob"也写了。
后来解决的办法是：使用axios直接写请求，而不是使用项目封装的方法，其次在返回的时候我们要new Blob的不是res，而是res.data
以下是我请求的全部代码，希望能帮广大同仁解决问题！

axios.get(this.apiURL+"/sys/user/testExport", {
       responseType: "blob" // 或者blob,GET请求用blob？？有待考证
      }).then(res => {
        //console.log(res,6677)
       // 这里的type最好参考Response Headers里面的content-type，有可能是application/vnd.ms-excel
       let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel; charset=utf-8'
       })
       //console.log(blob,122)
       // 获取文件名，根据自己需要的分割
       let fileName = 'aaa.xlsx'
       let a = document.createElement('a')
       let url = window.URL.createObjectURL(blob)
       a.href = url
       a.download = fileName
       document.body.appendChild(a)
       a.style.display = 'none'
       a.click()
       document.body.removeChild(a)
       window.URL.revokeObjectURL(url)
      })