通过浏览器中的 Javascript 在 iOS 上保存 Zip 文件

Question

几年前，我创建了一个应用程序kodeWeave。现在kodeWeave 使用一个名为JSZip 的javascript 库，用于在客户端创建和下载.zip 文件。

但是，我无法在我的 iPhone 上使用 JSZip 下载 zip 文件，但如果 zip 文件位于像 Github 这样的服务器上，我实际上可以在我的 iPhone 上下载 zip 文件。

起初我以为它可能只是 Chrome 浏览器，但是，我用其他浏览器进行了测试，例如 Safari、Firefox、Edge、Dolphin Browser 和 MyMedia。所有人都会打开一个新的 blob 或空白选项卡，但仅此而已，它只是位于一个什么都不做的空白选项卡上。

因为我可以在服务器上下载 zip 文件，所以这个问题与 JSZip 的编程方式特别相关。所以我的问题分为两部分。

1) 有谁知道如何用 JSZip 解决这个问题？
和
2) 封装问题 1 根本不是一个选项（至少在 Apple 改进他们的技术之前。有没有人知道一种将 zip 文件动态保存到服务器的方法，类似于 JSZip 通过 blob 保存 zip 文件的方式？

Answer 1

实际问题不在 JSZip 中，而是在 FileSaver.js 中，如 example 所示。

在 FileSaver README 中有一个适用于 iOS 的 warning。

saveAs 必须在用户交互事件中运行，例如 onTouchDown 或 onClick； setTimeout 将阻止 saveAs 触发。由于 iOS saveAs 中的限制在 新窗口 中打开，而不是 下载，如果你想修复这个问题，请告诉苹果这个错误是怎么回事 影响你。

另请注意其他浏览器支持及其对您的应用程序的限制。

1. 这不是 JSZip 的问题。由于系统限制，无法在 iOS 中修复 FileSaver。 我建议您将临时 zip 文件上传到后端并向最终用户提供下载链接。

怎么做？我修改了 JSZip 官网的例子。作为 HTTP 客户端，我更喜欢 axios，但你可以使用 vanilla XMLHttpRequest 或 fetch。

var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});

zip.generateAsync({type:"blob"})
    .then(function(content) {
        const file = new FormData();
        file.append("blob", content)

        axios.put('/upload/server', file, {})
            .then(function (res) {
              // done
              console.info('Uploaded')
            })
            .catch(function (err) {
              console.error('Failed due', err.message);
            });
});

1. 已打开一些错误，并建议从 2012 年 [原文如此！] 和 Bug 167341 开始提供补丁 Bug 102914。我相信社区可以推动这个修复发生。