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

Estrada Web Group
Administrador
¿Cómo generar y leer archivos .zip con Javascript?

Comprimir archivos 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.

Compartir artículo:

Más artículos geniales

Cómo comprobar si un valor existe en un arreglo con JavaScript?

Cómo comprobar si un valor existe en un arreglo con JavaScript?

Array.every() y Array.some() son métodos JavaScript que nos ayudan a comprobar si en un arreglo o matriz se cumple una condición específica.

Ver artículo completo
¿Cómo crear un scroll infinito con JavaScript y C#?

¿Cómo crear un scroll infinito con JavaScript y C#?

El scroll infinito es cuando un usuario visualiza una página y llega al final de esta (hasta debajo de la página), ésta realiza automáticamente una petición AJAX al servidor

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;