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

Question

几年前，我创建了一个应用程序 kodeWeave. Now kodeWeave uses a javascript library called JSZip，用于在客户端创建和下载 .zip 文件。

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

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

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

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

Answer 1

实际问题不在 JSZip 而在 FileSaver.js shown in example。

在 FileSaver 自述文件中有 iOS 的 warning。

saveAs must be run within a user interaction event such as onTouchDown or onClick; setTimeout will prevent saveAs from triggering. Due to restrictions in iOS saveAs opens in a new window instead of downloading, if you want this fixed please tell Apple how this bug is affecting you.

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

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

怎么做？我修改了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);
            });
});

已发现错误并提出了补丁 Bug 102914 opened from 2012 [sic!] and Bug 167341。我相信社区可以推动此修复的发生。

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

Saving Zip Files On iOS via Javascript In The Browser

javascript

zip

download

ios

jszip