使用JavaScript创建Zip文件

尽管我们在服务器端使用JavaScript做着令人惊奇的事情，但重要的是不要让我们忽略客户端上发生的一些很棒的事情。我最近发现的一个如此出色的项目是JSZip：一个JavaScript库，可让您轻松地从前端生成ZIP文件。那为什么有用呢？您可以允许用户从图库或几乎所有其他内容中选择和下载图像。让我们看看JSZip如何允许您从客户端生成结构化的Zip文件！

首先获取JSZip库 ，该库恰巧在所有主流浏览器中都可以使用。一旦页面中提供了库，生成Zip文件实际上只是几行代码：

var zip = new JSZip();

// Add an top-level, arbitrary text file with contents
zip.file("Hello.txt", "Hello Worldn");

// Generate a directory within the Zip file structure
var img = zip.folder("images");

// Add a file to the directory, in this case an image with data URI as contents
img.file("smile.gif", imgData, {base64: true});

// Generate the zip file asynchronously
zip.generateAsync({type:"blob"})
.then(function(content) {
    // Force down of the Zip file
    saveAs(content, "archive.zip");
});

您可以添加带有自定义名称和内容以及任意目录的单个文件。添加内容后，JSZip可以异步生成您的Zip文件，随后您可以触发下载。

您还可以加载和读取Zip文件：

var read_zip = new JSZip();
// Load zip content; you'd use fetch to get the content
read_zip.loadAsync(content)
.then(function(zip) {
    // Read from the zip file!
    read_zip.file("hello.txt").async("string"); 
    // a promise of "Hello Worldn"
});

我非常感谢JSZip的简单性。有更多高级和复杂的库，例如zip.js，但是JSZip可能会涵盖大多数用例。在客户端利用Zip文件的一个很好的例子是在Service Worker Cookbook中：在本地缓存Zip文件，提取其内容，并在Service Worker中提供服务。无论您使用哪种情况，都知道无需服务器就可以读取和生成Zip文件！