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

为您提供两个答案：

我认为您无法使用jQuery的ajax函数可靠地下载 binary 数据（但我可能会误会）。如果要下载二进制文件，请使用fetch，它支持将响应读取为内置的BLOB。
在页面上使用iframe将高度name="download-target"设置为零，然后使用form target="download-target method="post"提交并提交而不是使用ajax，将更为简单。确保响应中包含Content-Disposition标头，例如：
```
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
});

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

1 个答案: