在 TypeScript 中处理 ZIP 压缩文件：JSZip 和 adm-zip

在 TypeScript 中处理 ZIP/压缩文件：库概览与实践示例

在现代 TypeScript Web 开发中，经常需要处理 ZIP 压缩文件：在客户端打包文件、解压从服务器接收的数据，或创建复杂的压缩文件结构。本文将介绍两个最流行的库——JSZip 和 adm-zip，它们的功能、TypeScript 类型定义，并提供实际使用示例。

1. JSZip —— 适用于浏览器和 Node.js 的通用库

JSZip 是一个功能强大的库，用于创建、读取和编辑 ZIP 压缩文件，可在浏览器和 Node.js 环境中运行。它完全支持 TypeScript。

安装：

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

1.1 创建 ZIP 压缩文件

import JSZip from 'jszip';

async function createArchive(): Promise<Blob> {  const zip = new JSZip();    // 添加文本文件  zip.file('hello.txt', 'Hello World!');    // 添加包含文件的文件夹  const folder = zip.folder('images');  folder.file('logo.png', 'base64EncodedImageData...', {base64: true});    // 生成压缩文件（适用于浏览器的 Blob）  const blob = await zip.generateAsync({type: 'blob'});  return blob;}

1.2 读取和解压压缩文件

async function readArchive(file: File): Promise<void> {  const zip = new JSZip();  const content = await zip.loadAsync(file);    // 遍历所有文件  content.forEach(async (relativePath, zipEntry) => {    if (!zipEntry.dir) {      const data = await zipEntry.async('string');      console.log(`文件：${relativePath}，内容：${data}`);    }  });}

1.3 处理元数据

JSZip 允许管理日期、注释和访问权限：

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

2. adm-zip —— 适用于 Node.js 的轻量级替代方案

adm-zip 是一个针对 Node.js 服务端优化的库。它在处理大量数据时速度更快，并具有便捷的 API。

安装：

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

2.1 创建压缩文件

import AdmZip from 'adm-zip';

function createServerArchive(): void {  const zip = new AdmZip();    // 从缓冲区添加文件  zip.addFile('data.json', Buffer.from(JSON.stringify({key: 'value'})));    // 添加本地文件  zip.addLocalFile('/path/to/file.txt');    // 添加整个文件夹  zip.addLocalFolder('/path/to/folder', 'custom_folder_name');    // 写入磁盘  zip.writeZip('archive.zip');}

2.2 解压和提取

function extractArchive(): void {  const zip = new AdmZip('./archive.zip');    // 将所有文件提取到文件夹  zip.extractAllTo('./extracted', true);    // 获取条目列表  const entries = zip.getEntries();  entries.forEach(entry => {    console.log(`名称：${entry.entryName}，大小：${entry.header.size}`);        // 获取内容    const content = entry.getData().toString('utf8');  });}