简单的JSZip-从现有图像创建Zip文件

Question

我很难找到不涉及Base64或NodeJS的JSZip简单文档。基本上，我有一个目录，其中是test.html和一个名为“ images”的文件夹。在该文件夹内是一堆图像。我想从该文件夹中创建一个zip文件。

有人可以帮我一些非常简单的“ hello world”类型代码吗？http://stuk.github.io/jszip/上的文档包括从Base64数据添加图像或添加在JavaScript中创建的文本文件之类的内容。我想从现有文件创建一个.zip文件。

也许唯一支持通过JSZip将图像添加到.zip文件的方法就是通过Base64数据添加图像？我没有在文档的任何地方看到它，也没有看到image-url-to-base64函数，尽管我确实在StackOverflow的其他地方找到了它。

有什么建议吗？

Answer 1

在浏览器中，您可以使用 ajax 请求并使用该responseType属性来获取 arraybuffer（如果您需要 IE 9 支持，则可以使用jszip-utils例如）：

var xhr = new XMLHttpRequest();
xhr.open('GET', "images/img1.png", true);
xhr.responseType = "arraybuffer";
xhr.onreadystatechange = function(evt) {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            var zip = new JSZip();
            zip.file("images/img1.png", xhr.response);
        }
    }
};
xhr.send();

这个例子是有限的，因为它只处理一个文件并手动创建 xhr 对象（我没有使用任何库，因为你没有提到任何库），但应该向你展示如何做到这一点。

您可以在JSZip 文档中找到更完整的示例：它使用 jQuery Promise 和 jszip-utils 下载文件列表并在之后触发下载。

如果您使用库来处理 ajax 请求，请务必检查是否可以请求数组缓冲区。默认情况下将响应视为文本，这会损坏您的图像。例如 jQuery 应该很快就会支持它。