Criar arquivos Zip com JavaScript

Embora estejamos fazendo coisas incríveis com JavaScript no lado do servidor, é importante não perder de vista algumas das coisas excelentes que estão acontecendo no lado do cliente. Um desses projetos incríveis que descobri recentemente foi o JSZip: uma biblioteca JavaScript que permite que o senhor gere facilmente arquivos ZIP a partir do front-end. E por que isso é útil? O senhor pode permitir que os usuários selecionem e façam download de imagens de uma galeria ou de praticamente qualquer outra coisa. Vamos dar uma olhada em como o JSZip permite que o senhor gere arquivos Zip estruturados no lado do cliente!

Comece pegando o biblioteca JSZip que, por acaso, funciona em todos os principais navegadores. Uma vez que a biblioteca esteja disponível na página, a geração de um arquivo Zip é, na verdade, apenas algumas linhas de código:

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

O senhor pode adicionar arquivos individuais com nomes e conteúdos personalizados, bem como diretórios arbitrários. Depois que o conteúdo é adicionado, o JSZip pode gerar o arquivo Zip de forma assíncrona e, posteriormente, o usuário pode acionar o download.

O senhor também pode carregar e ler arquivos 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 World\n"
});

Eu realmente aprecio a simplicidade do JSZip. Há bibliotecas mais avançadas e complicadas disponíveis, como a zip.js, mas o JSZip provavelmente cobrirá a maioria dos casos de uso. Um ótimo exemplo de como tirar proveito dos arquivos Zip no lado do cliente está no Livro de receitas do Service WorkerO senhor pode usar o seguinte recurso: armazenar em cache um arquivo Zip localmente, extrair seu conteúdo e servi-lo em um service worker. Seja qual for o seu caso de uso, saiba que os arquivos Zip podem ser lidos e gerados sem a necessidade de um servidor!