React - 从 API 响应正文下载字节字符串中的 Zip 文件？

Question

我有一个有效的 API 调用，它在响应正文中返回一个在 Python 端以字节格式准备的字符串，该字符串是一个 zip 文件。字符串看起来像这样，但更长：\nPK\xef\xbf\xbd\xef\xbf\xbdQ\xef\xbf\xbd\xef\xbf\xbdF\xef\xbf\xbd\xef\xbf\xbd\xef \xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf \xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd\xef\xbf\xbd/export_file.csv\xef\xbf\xbd\xef\xbf\xbduX\\M\xef\xbf\ xbd

\n\n

这是一个包含一个 csv 文件的 zip 文件。在邮递员等工具中，在正文中使用相同参数点击相同的 POST 端点，我可以成功下载有效的 zip 文件，解压缩内容并查看 .csv 文件。在浏览器调试器工具中，我可以看到 API 端点返回成功的响应，正文中具有与上面相同的字符串。

\n\n

我每次尝试都失败的地方地方是在反应方面，做必要的工作来获取这个字符串并下载相同的zip文件。我在 SO 和其他地方读到的每一个建议都让我失望。以下是我的一些失败的尝试：

\n\n

（另请注意，成功的 API 调用会在此示例中返回 26kb 的有效负载）

\n\n

export function downloadZipFile(responseBody){\n\n  /* Blob Attempts */\n\n  // These download a 46kb file. Attempting to open gives "The compressed zip folder is invalid"\n  // var blob = new Blob([responseBody], {type: "content-type"}); \n  // var blob = new Blob([responseBody], {type: "application/zip"}); \n  // var blob = new Blob([responseBody], {type: "application/zip, application/octet-stream"}); \n  // var blob = new Blob([responseBody], {type: "application/octet-stream"}); \n  // var blob = new Blob([responseBody], {type: "octet/stream"}); \n\n  var fileName = "export.zip";\n  saveAs(blob,fileName);\n\n\n  /* Data String Attempts */\n\n  // const dataStr = "data:application/zip;" + responseBody; // "Failed - Network Error"\n  // const dataStr = "data:application/zip, application/octet-stream;" + responseBody; // Downloads 1kb File "The compressed zip folder is invalid"\n  // const dataStr = "data:application/zip,application/octet-stream;" + responseBody; // Downloads 1kb File "The compressed zip folder is invalid"\n  // const dataStr = "data:application/octet-stream;" + responseBody; // "Failed - Network Error"\n\n  let downloadElement = document.createElement(\'a\');\n  downloadElement.setAttribute("href", dataStr);\n  downloadElement.setAttribute("download", "export.zip");\n  document.body.appendChild(downloadElement); \n  downloadElement.click();\n  downloadElement.remove();\n\n}\n

\n

Answer 1

我来晚了，但希望能帮助别人。

在 api 调用中将 responseType 设置为“arraybuffer”非常重要，如下所示：

...
export const getZip = async (id) => {
   const { data } = await axios.get(
      "/sypa-applications/export",
      {
        id
      },
      { responseType: "arraybuffer" } 
      );

   return data;
 }
 ...

然后您可以通过两种方式下载 ZIP：

1.- 使用文件保护程序 npm 依赖项：

   let blob = new Blob([data], { type: "application/zip" });
   saveAs(blob, "fileName.zip");

2.- 使用 DOM：

const url = window.URL.createObjectURL(new Blob([data], { type: "application/zip" });
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "fileName.zip");
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);

在 GET 请求中将 responseType 参数设置为“arraybuffer”之前，我无法下载 ZIP。

谨致问候，阿尔贝托。

Answer 2

你检查过这个工具吗？https://gildas-lormeau.github.io/zip.js/ 有一个在浏览器中使用js解压文件的示例。http://gildas-lormeau.github.io/zip.js/demos/demo2.html

看来这就是你想要的。首先解压缩文件并根据需要使用 .csv