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

Posted 2023-03-15

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

【英文标题】：Saving Zip Files On iOS via Javascript In The Browser

【发布时间】：2018-11-26 21:50:30

【问题描述】：

几年前，我创建了一个应用程序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 文件的方式？

【参考方案1】：

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

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

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

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

这不是 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);
            );
);

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

【讨论】：

您知道一种将 zip 文件动态保存到服务器的方法，类似于 JSZip 通过 blob 保存 zip 文件的方式吗？

我更新了我的答案。我希望我为您提供了一个详尽的问题答案，这对您的应用程序有帮助。

是的，它确实有帮助