盡管我們?cè)诜?wù)器端使用JavaScript做著令人驚奇的事情，但重要的是不要讓我們忽略客戶端上發(fā)生的一些很棒的事情。我最近發(fā)現(xiàn)的一個(gè)如此出色的項(xiàng)目是JSZip：一個(gè)JavaScript庫(kù)，可讓您輕松地從前端生成ZIP文件。那為什么有用呢？您可以允許用戶從圖庫(kù)或幾乎所有其他內(nèi)容中選擇和下載圖像。讓我們看看JSZip如何允許您從客戶端生成結(jié)構(gòu)化的Zip文件！

首先獲取JSZip庫(kù) ，該庫(kù)恰巧在所有主流瀏覽器中都可以使用。一旦頁(yè)面中提供了庫(kù)，生成Zip文件實(shí)際上只是幾行代碼：

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");
});

您可以添加帶有自定義名稱和內(nèi)容以及任意目錄的單個(gè)文件。添加內(nèi)容后，JSZip可以異步生成您的Zip文件，隨后您可以觸發(fā)下載。

您還可以加載和讀取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的簡(jiǎn)單性。有更多高級(jí)和復(fù)雜的庫(kù)，例如zip.js，但是JSZip可能會(huì)涵蓋大多數(shù)用例。在客戶端利用Zip文件的一個(gè)很好的例子是在Service Worker Cookbook中：在本地緩存Zip文件，提取其內(nèi)容，并在Service Worker中提供服務(wù)。無(wú)論您使用哪種情況，都知道無(wú)需服務(wù)器就可以讀取和生成Zip文件！