Arbeiten mit ZIP/Archiven in TypeScript: vollständige Anleitung zu JSZip und adm-zip

Arbeiten mit ZIP/Archiven in TypeScript: Überblick über Bibliotheken und praktische Beispiele

In der modernen Webentwicklung mit TypeScript entsteht häufig die Notwendigkeit, mit ZIP-Archiven zu arbeiten: Dateien auf dem Client zu packen, vom Server erhaltene Daten zu entpacken oder komplexe Archivstrukturen zu erstellen. In diesem Artikel betrachten wir die beiden beliebtesten Bibliotheken — JSZip und adm-zip, ihre Möglichkeiten, die Typisierung für TypeScript und geben praktische Anwendungsbeispiele.

1. JSZip — universelle Bibliothek für Browser und Node.js

JSZip ist eine leistungsstarke Bibliothek zum Erstellen, Lesen und Bearbeiten von ZIP-Archiven, die sowohl im Browser als auch in der Node.js-Umgebung funktioniert. Sie bietet vollständige TypeScript-Unterstützung.

Installation:

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

1.1 Erstellen eines ZIP-Archivs

import JSZip from 'jszip';

async function createArchive(): Promise<Blob> {  const zip = new JSZip();    // Textdatei hinzufügen  zip.file('hello.txt', 'Hello World!');    // Ordner mit Datei hinzufügen  const folder = zip.folder('images');  folder.file('logo.png', 'base64EncodedImageData...', {base64: true});    // Archiv generieren (Blob für den Browser)  const blob = await zip.generateAsync({type: 'blob'});  return blob;}

1.2 Lesen und Entpacken eines Archivs

async function readArchive(file: File): Promise<void> {  const zip = new JSZip();  const content = await zip.loadAsync(file);    // Alle Dateien durchgehen  content.forEach(async (relativePath, zipEntry) => {    if (!zipEntry.dir) {      const data = await zipEntry.async('string');      console.log(`Datei: ${relativePath}, Inhalt: ${data}`);    }  });}

1.3 Arbeiten mit Metadaten

JSZip ermöglicht die Verwaltung von Daten, Kommentaren und Zugriffsrechten:

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

2. adm-zip — leichte Alternative für Node.js

adm-zip ist eine Bibliothek, die für den serverseitigen Teil in Node.js optimiert ist. Sie arbeitet bei großen Datenmengen schneller und bietet eine benutzerfreundliche API.

Installation:

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

2.1 Erstellen eines Archivs

import AdmZip from 'adm-zip';

function createServerArchive(): void {  const zip = new AdmZip();    // Datei aus Buffer hinzufügen  zip.addFile('data.json', Buffer.from(JSON.stringify({key: 'value'})));    // Lokale Datei hinzufügen  zip.addLocalFile('/path/to/file.txt');    // Ganzen Ordner hinzufügen  zip.addLocalFolder('/path/to/folder', 'custom_folder_name');    // Auf Disk schreiben  zip.writeZip('archive.zip');}

2.2 Entpacken und Extrahieren

function extractArchive(): void {  const zip = new AdmZip('./archive.zip');    // Alle Dateien in einen Ordner extrahieren  zip.extractAllTo('./extracted', true);    // Liste der Einträge abrufen  const entries = zip.getEntries();  entries.forEach(entry => {    console.log(`Name: ${entry.entryName}, Größe: ${entry.header.size}`);        // Inhalt abrufen    const content = entry.getData().toString('utf8');  });}

3. Vergleich der Bibliotheken

• JSZip — universell, funktioniert im Browser und Node.js, unterstützt Streaming-Generierung, hat eine umfangreiche API für die Arbeit mit Metadaten.
• adm-zip — schneller bei großen Datenmengen, einfachere API, funktioniert jedoch nur in Node.js.
• Leistung: adm-zip ist bei Archiven >100 MB im Vorteil.
• Typisierung: Beide bieten vollständige