Travailler avec les archives ZIP en TypeScript : la bibliothèque JSZip et les utilitaires

Travailler avec les archives ZIP en TypeScript : la bibliothèque JSZip et exemples pratiques

\n\n

Dans le développement web moderne, il est souvent nécessaire de regrouper plusieurs fichiers dans une seule archive pour faciliter le téléchargement ou le transfert de données. Dans l'écosystème TypeScript (et JavaScript), la solution la plus populaire pour travailler avec les archives ZIP est la bibliothèque JSZip. Elle permet de créer, lire et modifier des fichiers ZIP à la fois dans le navigateur et dans l'environnement Node.js.

\n\n

Dans cet article, nous allons détailler l'installation, la configuration et les principaux scénarios d'utilisation de JSZip dans les projets TypeScript. Vous apprendrez à créer des archives à partir de chaînes de caractères, de données binaires et de dossiers entiers, ainsi qu'à extraire le contenu de fichiers ZIP existants.

\n\n

Installation et importation de JSZip

\n\n

Pour commencer, installez la bibliothèque et ses types via npm ou yarn :

\n\n

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

\n\n

Après l'installation, importez JSZip dans votre fichier TypeScript :

\n\n

import JSZip from 'jszip';

\n\n

Si vous utilisez un système de modules (ES modules), l'importation fonctionnera comme indiqué ci-dessus. Pour CommonJS (require), la syntaxe peut différer, mais dans les projets TypeScript, il est recommandé d'utiliser les importations ES.

\n\n

Création d'une nouvelle archive ZIP

\n\n

Le scénario le plus simple est de créer une archive et d'y ajouter plusieurs fichiers texte. Voici un exemple :

\n\n

const zip = new JSZip();\n\n// Ajout de fichiers texte\nzip.file("hello.txt", "Bonjour, le monde !");\nzip.file("readme.md", "# Documentation\\n\\nCeci est un exemple de fichier Markdown.");\n\n// Ajout d'un dossier et d'un fichier à l'intérieur\nconst dossier = zip.folder("images");\ndossier.file("logo.png", "chaîneencodéeenbase64...", {base64: true});\n\n// Génération du fichier ZIP en tant que Blob\nzip.generateAsync({type: "blob"}).then((contenu) => {\n    // Création d'un lien de téléchargement\n    const lien = document.createElement("a");\n    lien.href = URL.createObjectURL(contenu);\n    lien.download = "mon-archive.zip";\n    lien.click();\n});

\n\n

Dans cet exemple, nous avons :

\n

\n
• Créé une instance de JSZip
\n
• Ajouté deux fichiers texte avec la méthode .file()
\n
• Créé un dossier imbriqué images et y avons placé un fichier avec des données base64
\n
• Généré l'archive au format Blob et initié le téléchargement
\n

\n\n

Lecture et extraction d'une archive ZIP existante

\n\n

JSZip permet non seulement de créer, mais aussi de lire des archives. Pour cela, on utilise la méthode loadAsync() :

\n\n

async function lireFichierZip(zipBlob: Blob): Promise<void> {\n    try {\n        const zip = await JSZip.loadAsync(zipBlob);\n        \n        // Obtention de la liste de tous les fichiers\n        const nomsFichiers = Object.keys(zip.files);\n        console.log("Fichiers dans l'archive :", nomsFichiers);\n\n        // Extraction du contenu d'un fichier spécifique\n        const fichierHello = zip.file("hello.txt");\n        if (fichierHello) {\n            const contenu = await fichierHello.async("string");\n            console.log("Contenu de hello.txt :", contenu);\n        }\n\n        // Itération sur tous les fichiers\n        zip.forEach((cheminRelatif, entreeZip) => {\n            console.log(`Fichier trouvé : ${cheminRelatif}, taille : ${entreeZip._data.uncompressedSize} octets`);\n        });\n\n    } catch (erreur) {\n        console.error("Erreur lors de la lecture du ZIP :", erreur);\n    }\n}

\n\n

Notez le typage : JSZip.loadAsync() retourne une promesse qui se résout en un objet JSZip. La méthode .file() retourne JSZipObject | null, donc avant d'appeler .async(), il faut vérifier l'existence du fichier.

\n\n

Travail avec les données binaires et les images

\n\n

Il est souvent nécessaire de regrouper dans une archive des images ou d'autres fichiers binaires. JSZip prend en charge le travail avec ArrayBuffer, Blob, Uint8Array et base64 :

\n\n

// Ajout d'un fichier à partir d'ArrayBu