Trabajo con archivos ZIP en TypeScript: biblioteca JSZip y utilidades

Trabajo con archivos ZIP en TypeScript: biblioteca JSZip y ejemplos prácticos

En el desarrollo web moderno, a menudo surge la necesidad de empaquetar varios archivos en un solo archivo para facilitar la descarga o transferencia de datos. En el ecosistema de TypeScript (y JavaScript), la solución más popular para trabajar con archivos ZIP es la biblioteca JSZip. Permite crear, leer y modificar archivos ZIP tanto en el navegador como en el entorno Node.js.

En este artículo, analizaremos en detalle la instalación, configuración y los escenarios principales de uso de JSZip en proyectos TypeScript. Aprenderá a crear archivos a partir de cadenas de texto, datos binarios y carpetas completas, así como a extraer el contenido de archivos ZIP existentes.

Instalación y configuración de JSZip

Para comenzar, instale la biblioteca y sus tipos a través de npm o yarn:

npm install jszipnpm install --save-dev @types/jszip

Después de la instalación, importe JSZip en su archivo TypeScript:

import JSZip from 'jszip';

Si utiliza un sistema de módulos (ES modules), la importación funcionará como se muestra arriba. Para CommonJS (require), la sintaxis puede diferir, pero en proyectos TypeScript se recomienda usar importaciones ES.

Creación de un nuevo archivo ZIP

El escenario más simple es crear un archivo y agregarle varios archivos de texto. Veamos un ejemplo:

const zip = new JSZip();

// Agregamos archivos de textozip.file("hello.txt", "¡Hola, Mundo!");zip.file("readme.md", "# Documentación

Este es un ejemplo de archivo Markdown.");

// Agregamos una carpeta y un archivo dentro de ellaconst folder = zip.folder("images");folder.file("logo.png", "base64encodedstring...", {base64: true});

// Generamos el archivo ZIP como Blobzip.generateAsync({type: "blob"}).then((content) => {    // Creamos un enlace para descargar    const link = document.createElement("a");    link.href = URL.createObjectURL(content);    link.download = "mi-archivo.zip";    link.click();});

En este ejemplo:

• Creamos una instancia de JSZip
• Agregamos dos archivos de texto con el método .file()
• Creamos una carpeta anidada images y colocamos dentro un archivo con datos en base64
• Generamos el archivo en formato Blob e iniciamos la descarga

Lectura y extracción de un archivo ZIP existente

JSZip no solo permite crear, sino también leer archivos. Para ello se utiliza el método loadAsync():

async function readZipFile(zipBlob: Blob): Promise<void> {    try {        const zip = await JSZip.loadAsync(zipBlob);                // Obtenemos la lista de todos los archivos        const fileNames = Object.keys(zip.files);        console.log("Archivos en el ZIP:", fileNames);

        // Extraemos el contenido de un archivo específico        const helloFile = zip.file("hello.txt");        if (helloFile) {            const content = await helloFile.async("string");            console.log("Contenido de hello.txt:", content);        }

        // Iteramos sobre todos los archivos        zip.forEach((relativePath, zipEntry) => {            console.log(`Archivo encontrado: ${relativePath}, tamaño: ${zipEntry._data.uncompressedSize} bytes`);        });

    } catch (error) {        console.error("Error al leer el ZIP:", error);    }}

Tenga en cuenta la tipificación: JSZip.loadAsync() devuelve una promesa que se resuelve en un objeto JSZip. El método .file() devuelve JSZipObject | null, por lo que antes de llamar a .async() debe verificar la existencia del archivo.

Trabajo con datos binarios e imágenes

A menudo es necesario empaquetar imágenes u otros archivos binarios en un archivo. JSZip admite trabajar con ArrayBuffer, Blob, Uint8Array y base64:

// Agregar un archivo desde ArrayBu