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

Question

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

6

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

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

也许使用JSZip添加图像到.zip文件的唯一支持方式是通过Base64数据进行添加？我在文档中没有看到这个，也没有看到图像url转为base64的函数，尽管我在StackOverflow上找到了一个函数。

有什么建议吗？

- Jake

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Duponchel · Accepted Answer

在浏览器中，您可以使用ajax请求，并使用responseType属性来获取一个数组缓冲区（如果需要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 promises和jszip-utils下载文件列表，并在此之后触发下载。

如果您使用库来处理ajax请求，请确保检查是否可以请求arraybuffer。默认情况下，响应被视为文本，这将损坏您的图像。例如，jQuery应该会很快支持它。