Lo que no es tan habitual es encontrar librerías de script que trabajan al lado del navegador y que sean capaces de crear archivos .ZIP. Hoy os traemos una librería creada en JavaScript que nos permitirá realizar este tipo de acciones y que recibe el nombre de JSZIP.
Veamos a continuación un ejemplo de cómo funciona esta librería.
Lo primero que debemos hacer es incluir la librería JavaScript en el documento HTML donde queremos crear el archivo comprimido. Esta librería nos la podemos descargar de su sitio oficial.
<script type="text/javascript" src="https://raw.github.com/Stuk/jszip/master/jszip.js"></script>
Lo siguiente que hacemos es crear el código encargado de generar el archivo .ZIP
Lo primero que hay que hacer es crear el objeto encargado de manejar la creación del archivo. Esto lo hacemos con la siguiente línea:
var zip = new JSZip();
Añadimos los archivos que estarán dentro del zip que estamos creando. En este caso estamos añadiendo un archivo TXT con el texto “Hola Mundo”.
zip.add("hello1.txt", "Hola Mundon");
También podríamos añadir imágenes sueltas o dentro de una carpeta. En nuestro ejemplo añadiremos un GIF dentro de la carpeta “imagenes”. Para ello primero creamos la carpeta:
var img = zip.folder("images");
Luego le añadimos la imagen a ese directorio que hemos creado.
img.file("smile.gif", imgData, {base64: true});
Una vez que hemos añadido todos los archivos, generamos el zip
Content = zip.generate();
Por último lanzamos la descarga del archivo que hemos generado.
location.href="data:application/zip;base64," + content;
Si juntamos todo, quedaría algo como lo siguiente.
var zip = new JSZip();
zip.add("hello1.txt", "Hello First Worldn");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
content = zip.generate();
location.href="data:application/zip;base64," + content;
Según sus creadores, esta librería es compatible con todos los navegadores modernos, incluso con Internet Explorer desde su versión 6.
Sitio oficial JSZip