在 TypeScript 中使用 ZIP 压缩包：JSZip 库与实用工具

在 TypeScript 中使用 ZIP 压缩包：JSZip 库与实用示例

在现代 Web 开发中，经常需要将多个文件打包成一个压缩包，以便于下载或数据传输。在 TypeScript（和 JavaScript）生态系统中，用于处理 ZIP 压缩包最流行的解决方案是 JSZip 库。它允许您在浏览器和 Node.js 环境中创建、读取和修改 ZIP 文件。

在本文中，我们将详细介绍在 TypeScript 项目中安装、配置和使用 JSZip 的主要场景。您将学习如何从字符串、二进制数据甚至整个文件夹创建压缩包，以及如何提取现有 ZIP 文件的内容。

安装和引入 JSZip

首先，通过 npm 或 yarn 安装该库及其类型定义：

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

安装后，将 JSZip 导入到您的 TypeScript 文件中：

import JSZip from 'jszip';

如果您使用模块系统（ES modules），导入方式如上所示。对于 CommonJS（require），语法可能有所不同，但在 TypeScript 项目中，建议使用 ES 导入。

创建新的 ZIP 压缩包

最简单的场景是创建一个压缩包并向其中添加几个文本文件。请看以下示例：

const zip = new JSZip();

// 添加文本文件zip.file("hello.txt", "Hello, World!");zip.file("readme.md", "# 文档

这是一个 Markdown 文件示例。");

// 添加文件夹及其内部文件const folder = zip.folder("images");folder.file("logo.png", "base64encodedstring...", {base64: true});

// 生成 ZIP 文件为 Blob 格式zip.generateAsync({type: "blob"}).then((content) => {    // 创建下载链接    const link = document.createElement("a");    link.href = URL.createObjectURL(content);    link.download = "my-archive.zip";    link.click();});

在这个示例中，我们：

• 创建了一个 JSZip 实例
• 使用 .file() 方法添加了两个文本文件
• 创建了一个名为 images 的子文件夹，并向其中添加了一个包含 base64 数据的文件
• 以 Blob 格式生成了压缩包并触发下载

读取和提取现有的 ZIP 压缩包

JSZip 不仅可以创建压缩包，还可以读取它们。为此，需要使用 loadAsync() 方法：

async function readZipFile(zipBlob: Blob): Promise<void> {    try {        const zip = await JSZip.loadAsync(zipBlob);                // 获取所有文件的列表        const fileNames = Object.keys(zip.files);        console.log("压缩包中的文件:", fileNames);

        // 提取特定文件的内容        const helloFile = zip.file("hello.txt");        if (helloFile) {            const content = await helloFile.async("string");            console.log("hello.txt 的内容:", content);        }

        // 遍历所有文件        zip.forEach((relativePath, zipEntry) => {            console.log(`找到文件: ${relativePath}, 大小: ${zipEntry._data.uncompressedSize} 字节`);        });

    } catch (error) {        console.error("读取 ZIP 时出错:", error);    }}

请注意类型标注：JSZip.loadAsync() 返回一个 Promise，该 Promise 解析为一个 JSZip 对象。.file() 方法返回 JSZipObject | null，因此在调用 .async() 之前需要检查文件是否存在。

处理二进制数据和图像

通常需要将图像或其他二进制文件打包到压缩包中。JSZip 支持处理 ArrayBuffer、Blob、Uint8Array 和 base64 格式的数据：

// 从 ArrayBu