javascript - 使用 JavaScript 创建 Zip 文件时出现问题

Question

我的项目有一个要求，当用户选择多个文件下载时，我们需要将它们压缩然后让它们下载。我们已经测试了 Struts2 操作是否正确列出了所有文件并将它们传递到 UI。我们已经验证文件是否正确地列在 UI 上，但是当执行 blob 语句时，它使 zip 文件损坏。 这是我的代码片段。 有人可以帮忙吗？

代码:

   $.ajax({
      url: url,
      data: data,
      type: "POST",
      async: true,
      success: function (data) {
        var binaryData = [];
        binaryData.push(data);
        var link=document.createElement('a');
        link.href =window.URL.createObjectURL(**new Blob(binaryData, {type: "application/zip"**}));
        link.download = "User Reports Data Files.zip"
        link.click();
      },
      error: function (request, status, error) {
      }
    }); 

Answer 1

给你两个答案:

1. 我认为您无法使用 jQuery 的 ajax 函数可靠地下载二进制数据(但我可能是错的)。如果您想下载二进制文件，请使用 fetch ，它支持将响应读取为内置 BLOB。

2. 使用 name="download-target" 在页面上放置一个零高度的 iframe 并使用 form 会更简单target="download-target method="post" 并提交，而不是使用 ajax。确保响应包含 Content-Disposition header ，例如:

   Content-Disposition: attachment; filename="User Reports Data Files.zip"
   

#2 更简单，让浏览器以正常的、经过彻底测试的方式处理下载。

但这是#1 的草图:

fetch(url, {
    method: "POST",
    body: data
})
.then(response => {
    if (!response.ok) {
        throw new Error("HTTP status " + response.status);
    }
    return response.blob();
});
.then(blob => {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = "User Reports Data Files.zip"
    link.style.display = "none";         // Firefox wants this
    document.body.appendChild(link);     // ""
    link.click();
    setTimeout(() => {                   // ""
        document.body.removeChild(link); // ""
    }, 10000);                           // ""
})
.catch(error => {
    // Handle/report the error
});