Trabajo con archivos ZIP en TypeScript: guía completa sobre JSZip y adm-zip

Trabajo con archivos ZIP en TypeScript: resumen de librerías y ejemplos prácticos

En el desarrollo web moderno con TypeScript, a menudo surge la necesidad de trabajar con archivos ZIP: empaquetar archivos en el cliente, descomprimir datos recibidos del servidor o crear estructuras de archivos complejas. En este artículo, revisaremos las dos librerías más populares — JSZip y adm-zip, sus capacidades, tipificación para TypeScript y proporcionaremos ejemplos prácticos de uso.

1. JSZip — librería universal para navegador y Node.js

JSZip es una potente librería para crear, leer y editar archivos ZIP, que funciona tanto en el navegador como en el entorno Node.js. Tiene soporte completo para TypeScript.

Instalación:

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

1.1 Creación de un archivo ZIP

import JSZip from 'jszip';

async function createArchive(): Promise<Blob> {  const zip = new JSZip();    // Agregamos un archivo de texto  zip.file('hello.txt', 'Hello World!');    // Agregamos una carpeta con un archivo  const folder = zip.folder('images');  folder.file('logo.png', 'base64EncodedImageData...', {base64: true});    // Generamos el archivo (Blob para el navegador)  const blob = await zip.generateAsync({type: 'blob'});  return blob;}

1.2 Lectura y descompresión de un archivo

async function readArchive(file: File): Promise<void> {  const zip = new JSZip();  const content = await zip.loadAsync(file);    // Iteramos sobre todos los archivos  content.forEach(async (relativePath, zipEntry) => {    if (!zipEntry.dir) {      const data = await zipEntry.async('string');      console.log(`Archivo: ${relativePath}, contenido: ${data}`);    }  });}

1.3 Trabajo con metadatos

JSZip permite gestionar fechas, comentarios y permisos de acceso:

const zip = new JSZip();zip.file('document.txt', 'Text content', {  date: new Date('2024-01-01'),  comment: 'Documento importante',  unixPermissions: '644'});

2. adm-zip — alternativa ligera para Node.js

adm-zip es una librería optimizada para el lado del servidor en Node.js. Funciona más rápido con grandes volúmenes de datos y tiene una API conveniente.

Instalación:

npm install adm-zipnpm install @types/adm-zip --save-dev

2.1 Creación de un archivo

import AdmZip from 'adm-zip';

function createServerArchive(): void {  const zip = new AdmZip();    // Agregar archivo desde un buffer  zip.addFile('data.json', Buffer.from(JSON.stringify({key: 'value'})));    // Agregar archivo local  zip.addLocalFile('/path/to/file.txt');    // Agregar una carpeta completa  zip.addLocalFolder('/path/to/folder', 'custom_folder_name');    // Escribir en disco  zip.writeZip('archive.zip');}

2.2 Descompresión y extracción

function extractArchive(): void {  const zip = new AdmZip('./archive.zip');    // Extraer todos los archivos en una carpeta  zip.extractAllTo('./extracted', true);    // Obtener lista de entradas  const entries = zip.getEntries();  entries.forEach(entry => {    console.log(`Nombre: ${entry.entryName}, Tamaño: ${entry.header.size}`);        // Obtener contenido    const content = entry.getData().toString('utf8');  });}

3. Comparación de librerías

• JSZip — universal, funciona en navegador y Node.js, soporta generación por streaming, tiene una API rica para trabajar con metadatos.
• adm-zip — más rápida en grandes volúmenes, API más simple, pero solo funciona en Node.js.
• Rendimiento: adm-zip gana al trabajar con archivos >100 MB.
• Tipificación: ambas tienen soporte completo para TypeScript.