Cómo crear archivos zip en Javascript

El formato ZIP es el tipo de archivo más utilizado a la hora de comprimir datos y transportar información. Existe un amplio abanico de posibilidades para generar este tipo de archivos. La mayoría de los lenguajes de programación suelen ofrecer algún tipo de librería para trabajar con estos archivos. Lenguajes como Java o PHP ofrecen todo lo necesario para trabajar con ellos.

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

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", "Hola Mundo");
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.

Y este ha sido el artículo en el que trataba explicaros cómo crear archivos zip con Javascript, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.