Mientras hacemos cosas asombrosas con JavaScript en el lado del servidor, es importante no desviar nuestros ojos de algunas de las grandes cosas que suceden en el lado del cliente. Uno de estos proyectos que recientemente hemos descubierto es JSZip: una biblioteca JavaScript que permite generar fácilmente archivos ZIP desde el front-end. ¿Y por qué es útil? Puedes permitir a los usuarios seleccionar y descargar imágenes desde una galería o casi cualquier otra cosa. Echemos un vistazo a cómo JSZip permite generar archivos Zip estructurados desde el lado del cliente.
Comienza por coger la biblioteca JSZip, que pasa a trabajar en todos los principales navegadores. Una vez que la biblioteca está disponible en la página, generar un archivo Zip es cosa de unas pocas líneas de código:
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");
});
Puedes agregar archivos individuales con nombres y contenidos personalizados, así como directorios arbitrarios. Una vez que has agregado el contenido, JSZip puede generar de forma asíncrona tu archivo Zip y posteriormente puedes activar la descarga.
También puedes cargar y leer archivos 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"
});
Es de apreciar la simplicidad de JSZip. Existen bibliotecas más avanzadas y complicadas, como zip.js , pero es probable que JSZip cubra la mayoría de los casos de uso. Un gran ejemplo de aprovechamiento de los archivos Zip en el lado del cliente se encuentra en el Service Worker Cookbook: caché de un archivo Zip localmente, extraer su contenido y servirlo dentro de un service worker. Sea cual sea tu caso de uso, debes saber que los archivos Zip pueden ser leídos y generados sin necesidad de un servidor.
Comentarios