Vytvářejte soubory ZIP pomocí JavaScriptu

I když s JavaScriptem děláme úžasné věci na straně serveru, je důležité nespouštět oči z některých skvělých věcí, které se dějí na straně klienta. Jeden takový úžasný projekt, který jsem nedávno objevil, byl JSZip: JavaScriptová knihovna, která vám umožňuje snadno generovat soubory ZIP z front-endu. A proč je to užitečné? Můžete uživatelům umožnit vybírat a stahovat obrázky z galerie nebo téměř cokoli jiného. Pojďme se podívat na to, jak vám JSZip umožňuje generovat strukturované soubory Zip na straně klienta!

Začněte tím, že vezmete knihovnu JSZip, která funguje ve všech hlavních prohlížečích. Jakmile je knihovna dostupná na stránce, vygenerování souboru Zip je opravdu jen pár řádků kódu:

var zip = new JSZip();

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

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

Můžete přidat jednotlivé soubory s vlastními názvy a obsahem, stejně jako libovolné adresáře. Jakmile je váš obsah přidán, může JSZip asynchronně vygenerovat váš soubor Zip a následně můžete spustit stahování.

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

Velmi oceňuji jednoduchost JSZip. K dispozici jsou pokročilejší a komplikovanější knihovny, jako je zip.js, ale JSZip pravděpodobně pokryje většinu případů použití. Jedním skvělým příkladem využití souborů Zip na straně klienta je kuchařka Service Worker:uložte soubor Zip do místní mezipaměti, extrahujte jeho obsah a poskytujte v rámci servisního pracovníka. Ať už je váš případ použití jakýkoli, vězte, že soubory ZIP lze číst a generovat bez potřeby serveru!