如何使用 axios vuejs 下载 excel 文件？

Posted 2023-02-16

【中文标题】如何使用 axios vuejs 下载 excel 文件？

【英文标题】：How to download excel file with axios vuejs?

【发布时间】：2021-09-22 04:03:19

【问题描述】：

在控制器上，我返回 excel 文件所在的路径。现在我要下载该文件

下面是我的代码：

reportExcel(val) 
  axios
    .get("/algn/api/report/" + val)
    .then((res) => 
      var url = res.data; // http://localhost.local/public/files/data.xlsx
      const a = document.createElement("a");
      a.href = url;
      a.download = url.split("/").pop();
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    )
    .catch((error) => 
      console.log(error);
    );
,

我收到错误消息，因为“Excel 无法打开文件“data.xlsx”，因为文件格式或文件扩展名无效。验证文件没有损坏，并且文件扩展名与文件格式匹配”。 （原来的excel文件还是可以用的）。

我已经尝试了在谷歌中找到的所有解决方案，但都没有奏效。请帮忙。谢谢

【问题讨论】：

通过浏览器或邮递员访问http://localhost/algn/api/report/val能得到正确的文件吗？

【参考方案1】：

试试这个：

reportExcel(val) 
  axios
    // add responseType
    .get("/algn/api/report/" + val, responseType : 'blob') 
    .then((res) => 
      const url = window.URL.createObjectURL(new Blob([res]));
      const a = document.createElement("a");
      a.href = url;
      const filename = `file.xlsx`;
      a.setAttribute('download', filename);
      document.body.appendChild(link);
      a.click();
      a.remove();
    )
    .catch((error) => 
      console.log(error);
    );
,

假设链接提供了正确的 excel 文件，我们可以通过在请求中指定 responseType : 'blob' 来告知它是文件（不是通常的 JSON）。然后，使用window.URL.createObjectURL(new Blob([res])) 创建文件。剩下的就是处理文件而不是文本的小调整。