使用JavaScript打开下载的zip文件时出现问题

Question

我正在尝试打开通过GET请求发送给我的已下载的zip文件。 我正在使用axios进行api请求。

问题：

文件已下载，但我无法提取或打开它。 空存档问题。

我在使用什么？

这是我的响应处理程序：

最初的回答：

const data = response.data
const url = window.URL.createObjectURL(new Blob([data]));

const link = document.createElement("a");
link.href = url;
link.setAttribute("download", `report.zip`);

document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);

1. 这个API很好用。我用Postman测试过了，能够下载和处理zip文件中的内容。
2. 上面的代码对于csv文件类型也很好用。

我怀疑是Blob出了问题，请分享一下可能的原因。

注：Original Answer翻译成“最初的回答”未涉及到具体内容，无法进行翻译。

- Nauman Zafar

Answer 1

我遇到了同样的问题，并找到了解决办法。 你需要在你的axios请求中设置responseType: 'blob'。默认的axios响应类型是json，适用于csv或文本文件等格式，但不适用于zip文件。 希望这能帮到你！

- MasterChief

Answer 2

我不100%确定，但也许你只是缺少了blob的type。这是我使用的用于通过Ajax下载文件的函数。还有一个专门针对Internet Explorer/Edge的路径，因为它会阻止合成链接的点击。

const downloadFile = (data, filename, type = "application/zip) => {
  const blob = new Blob([data], { type })
  if(navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob,filename)
  } else {
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', filename)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

所以你可以在你的代码中使用它：

const data = response.data
downloadFile(data, "report.zip")

- Auskennfuchs