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

Posted 2023-03-29

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

【英文标题】：React - Downloading a Zip File from API Response Body in Bytes String?

【发布时间】：2019-12-26 20:46:46

【问题描述】：

我有一个有效的 API 调用，它在响应正文中返回一个在 Python 端以字节格式准备的字符串，它是一个 zip 文件。字符串看起来像这样，但更长： PK��Q��F����������������/export_file.csv��uX\M�

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

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

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

export function downloadZipFile(responseBody)

  /* Blob Attempts */

  // These download a 46kb file. Attempting to open gives "The compressed zip folder is invalid"
  // var blob = new Blob([responseBody], type: "content-type"); 
  // var blob = new Blob([responseBody], type: "application/zip"); 
  // var blob = new Blob([responseBody], type: "application/zip, application/octet-stream"); 
  // var blob = new Blob([responseBody], type: "application/octet-stream"); 
  // var blob = new Blob([responseBody], type: "octet/stream"); 

  var fileName = "export.zip";
  saveAs(blob,fileName);


  /* Data String Attempts */

  // const dataStr = "data:application/zip;" + responseBody; // "Failed - Network Error"
  // const dataStr = "data:application/zip, application/octet-stream;" + responseBody; // Downloads 1kb File "The compressed zip folder is invalid"
  // const dataStr = "data:application/zip,application/octet-stream;" + responseBody; // Downloads 1kb File "The compressed zip folder is invalid"
  // const dataStr = "data:application/octet-stream;" + responseBody; // "Failed - Network Error"

  let downloadElement = document.createElement('a');
  downloadElement.setAttribute("href", dataStr);
  downloadElement.setAttribute("download", "export.zip");
  document.body.appendChild(downloadElement); 
  downloadElement.click();
  downloadElement.remove();

【问题讨论】：

如何触发下载并获取responseBody？您应该通过直接提供 API 端点 url 让浏览器下载文件，而不是使用任何类型的 AJAX 调用。

你试过了吗？ digitaldrummerj.me/node-download-zip-and-extract

downloadElement.setAttribute('href','data:application/zip;charset=utf8,'+ encodeURIComponent(responseBody));

@ChristosLytras 有一些解决方案，例如创建临时链接并触发将 api 响应下载为文件。

@AmirhosseinMehrvarzi 我不明白你为什么要标记我的名字，但这正是我向 OP 提出的建议。问题本身也表明了您要告诉我的内容。 （看看底部你会看到一个let downloadElement = document.createElement('a'); ... downloadElement.click(); ...，这是一个临时链接）。

【参考方案1】：

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

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