¿Cómo generar y leer archivos .zip con Javascript?

Javascript es una herramienta increíble que nos permite crear sitios web más amigables e interactivas para nuestros clientes finales, nos ayuda obteniendo datos de lado del servidor y por otro lado nos ayuda a mejorar las cosas que ocurren en el lado del cliente. Hay un proyecto llamado JSZip  en el cual desarrollaron una biblioteca de JavaScript que te permite generar fácilmente archivos ZIP desde el front-end. Te preguntaras ¿Y por qué es eso útil? Puedes permitir que tus usuarios seleccionen y descarguen imágenes de una galería, documentos o cualquier otra cosa. Echemos un vistazo cómo JSZip te permite generar archivos Zip estructurados desde el lado del cliente.

Importar JSZip a nuestro proyecto

Primero debes incluir la biblioteca JSZip a tu proyecto, que funciona en todos los navegadores más comerciales. Una vez que la biblioteca está disponible dentro de tu página, generar un archivo Zip es muy sencillo, solo se requieren unas pocas líneas de código.

<script src="/ruta/de/libreria.js">script>

Una vez importada la librería podemos empezar a generar archivos .zip con pocas líneas de código.

var zip = new JSZip();

// Agrega un archivo de texto 

zip.file("Hello.txt", "Hello World\n");

// Genera un directorio dentro de la estructura de archivos Zip

var img = zip.folder("images");

// Agregar un archivo al directorio, en este caso una imagen con URI de datos como contenido

img.file("smile.gif", imgData, {base64: true});

// Genera el archivo zip de forma asíncrona

zip.generateAsync({type:"blob"})

.then(function(content) {

    // Descargar el archivo Zip

    saveAs(content, "archive.zip");

});

Además puedes agregar archivos individuales con nombres y contenidos personalizados, así como también directorios arbitrarios. Una vez que se hayan agregado los contenidos, JSZip puede generar asincrónicamente su archivo Zip y posteriormente activa la descarga.

Leer Archivos .zip

La librería también permite cargar y leer archivos Zip:

var read_zip = new JSZip();

// Cargar contenido zip; usarías fetch para obtener el contenido

read_zip.loadAsync(content)

.then(function(zip) {

    // ¡Lee del archivo zip!

    read_zip.file("hello.txt").async("string"); // un saludo "Hello World\n"

});

JSZip realmente es muy sencillo. Hay bibliotecas más avanzadas y complicadas disponibles, como zip.js, pero es probable que JSZip cubra la mayoría de los casos de uso. Sea cual sea tu caso de uso, lo importante es que sepas que los archivos Zip se pueden leer y generar sin necesidad de un servidor.

Agradeceré enormemente que me envíes tus comentarios y tan pronto como pueda te responderé. De antemano gracias.