Arbeiten mit ZIP-Archiven in TypeScript: Bibliothek JSZip und Hilfsprogramme

Arbeiten mit ZIP-Archiven in TypeScript: Bibliothek JSZip und praktische Beispiele

\n\n

In der modernen Webentwicklung besteht häufig die Notwendigkeit, mehrere Dateien in einem Archiv zu bündeln, um sie bequem herunterladen oder Daten übertragen zu können. Im TypeScript- (und JavaScript-) Ökosystem ist die Bibliothek JSZip die beliebteste Lösung für die Arbeit mit ZIP-Archiven. Sie ermöglicht das Erstellen, Lesen und Ändern von ZIP-Dateien sowohl im Browser als auch in der Node.js-Umgebung.

\n\n

In diesem Artikel werden wir die Installation, Konfiguration und die wichtigsten Anwendungsszenarien von JSZip in TypeScript-Projekten detailliert behandeln. Sie lernen, Archive aus Zeichenketten, Binärdaten und ganzen Ordnern zu erstellen sowie den Inhalt vorhandener ZIP-Dateien zu extrahieren.

\n\n

Installation und Einbindung von JSZip

\n\n

Installieren Sie zunächst die Bibliothek und ihre Typen über npm oder yarn:

\n\n

npm install jszip\nnpm install --save-dev @types/jszip

\n\n

Nach der Installation importieren Sie JSZip in Ihre TypeScript-Datei:

\n\n

import JSZip from 'jszip';

\n\n

Wenn Sie ein modulares System (ES modules) verwenden, funktioniert der Import wie oben gezeigt. Für CommonJS (require) kann die Syntax abweichen, aber in TypeScript-Projekten wird die Verwendung von ES-Imports empfohlen.

\n\n

Erstellen eines neuen ZIP-Archivs

\n\n

Das einfachste Szenario ist das Erstellen eines Archivs und das Hinzufügen mehrerer Textdateien. Betrachten wir ein Beispiel:

\n\n

const zip = new JSZip();\n\n// Textdateien hinzufügen\nzip.file("hello.txt", "Hallo, Welt!");\nzip.file("readme.md", "# Dokumentation\\n\\nDies ist ein Beispiel für eine Markdown-Datei.");\n\n// Ordner und eine Datei darin hinzufügen\nconst folder = zip.folder("images");\nfolder.file("logo.png", "base64codierterstring...", {base64: true});\n\n// ZIP-Datei als Blob generieren\nzip.generateAsync({type: "blob"}).then((content) => {\n    // Link zum Herunterladen erstellen\n    const link = document.createElement("a");\n    link.href = URL.createObjectURL(content);\n    link.download = "mein-archiv.zip";\n    link.click();\n});

\n\n

In diesem Beispiel haben wir:

\n

\n
• Eine Instanz von JSZip erstellt
\n
• Zwei Textdateien mit der Methode .file() hinzugefügt
\n
• Einen verschachtelten Ordner images erstellt und eine Datei mit base64-Daten darin abgelegt
\n
• Das Archiv im Blob-Format generiert und den Download gestartet
\n

\n\n

Lesen und Extrahieren eines vorhandenen ZIP-Archivs

\n\n

JSZip ermöglicht nicht nur das Erstellen, sondern auch das Lesen von Archiven. Dazu wird die Methode loadAsync() verwendet:

\n\n

async function readZipFile(zipBlob: Blob): Promise<void> {\n    try {\n        const zip = await JSZip.loadAsync(zipBlob);\n        \n        // Liste aller Dateien abrufen\n        const fileNames = Object.keys(zip.files);\n        console.log("Dateien im Archiv:", fileNames);\n\n        // Inhalt einer bestimmten Datei extrahieren\n        const helloFile = zip.file("hello.txt");\n        if (helloFile) {\n            const content = await helloFile.async("string");\n            console.log("Inhalt von hello.txt:", content);\n        }\n\n        // Über alle Dateien iterieren\n        zip.forEach((relativePath, zipEntry) => {\n            console.log(`Datei gefunden: ${relativePath}, Größe: ${zipEntry._data.uncompressedSize} Bytes`);\n        });\n\n    } catch (error) {\n        console.error("Fehler beim Lesen des ZIP:", error);\n    }\n}

\n\n

Beachten Sie die Typisierung: JSZip.loadAsync() gibt ein Promise zurück, das in ein JSZip-Objekt aufgelöst wird. Die Methode .file() gibt JSZipObject | null zurück, daher muss vor dem Aufruf von .async() die Existenz der Datei überprüft werden.

\n\n

Arbeiten mit Binärdaten und Bildern

\n\n

Häufig müssen Bilder oder andere Binärdateien in ein Archiv gepackt werden. JSZip unterstützt die Arbeit mit ArrayBuffer, Blob, Uint8Array und base64:

\n\n

// Hinzufügen einer Datei aus ArrayBu