在 TypeScript 中处理 ZIP/压缩包：完整指南

在 TypeScript 中处理 ZIP/压缩包

在现代 Web 开发中，经常需要处理压缩包：通过一个包上传多个文件、解压配置文件或创建数据备份。TypeScript 作为 JavaScript 的静态类型超集，为此任务提供了便捷的工具。在本文中，我们将介绍两个流行的库：JSZip 和 adm-zip，并学习如何创建、读取和修改 ZIP 压缩包。

为什么选择 TypeScript？

TypeScript 添加了严格的类型检查，这在处理二进制数据和复杂的压缩包结构时特别有用。您可以在 IDE 中获得自动补全、早期错误检测和清晰的代码。要处理 ZIP，您需要通过 npm 安装其中一个库：

npm install jszipnpm install @types/jszip  // 用于 TypeScript 支持

或

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

JSZip 库：创建压缩包

JSZip 是在浏览器和 Node.js 中处理 ZIP 最流行的库。它异步工作，支持添加文件、文件夹，甚至以 Blob 格式生成压缩包。

创建简单压缩包

考虑一个示例，我们创建一个包含文本文件和带有图片的文件夹的压缩包：

import JSZip from 'jszip';

async function createArchive(): Promise<Blob> {  const zip = new JSZip();

  // 添加文本文件  zip.file('hello.txt', '你好，世界！');

  // 创建文件夹并添加文件  const imgFolder = zip.folder('images');  if (imgFolder) {    imgFolder.file('logo.png', 'base64EncodedString...', { base64: true });  }

  // 将压缩包生成为 Blob  const blob = await zip.generateAsync({ type: 'blob' });  return blob;}

// 使用createArchive().then(blob => {  // 下载压缩包  const link = document.createElement('a');  link.href = URL.createObjectURL(blob);  link.download = 'archive.zip';  link.click();});

在这个示例中，我们创建了一个包含两个文件的压缩包。请注意选项 { base64: true }——它允许添加以 base64 编码的二进制数据。

使用 JSZip 读取和解压压缩包

通常需要读取从用户或服务器获取的现有 ZIP 文件。JSZip 可以从 Blob、ArrayBuffer 或 base64 字符串加载压缩包。

async function readArchive(file: Blob): Promise<void> {  try {    const zip = await JSZip.loadAsync(file);

    // 获取文件列表    const fileList: string[] = [];    zip.forEach((relativePath, zipEntry) => {      fileList.push(relativePath);    });    console.log('压缩包中的文件：', fileList);

    // 提取特定文件的内容    const content = await zip.file('hello.txt')?.async('string');    console.log('hello.txt 的内容：', content);  } catch (error) {    console.error('读取压缩包时出错：', error);  }}

// 通过 input 上传文件的示例document.getElementById('fileInput')?.addEventListener('change', (event) => {  const input = event.target as HTMLInputElement;  if (input.files && input.files[0]) {    readArchive(input.files[0]);  }});

方法 async('string') 将文件内容作为字符串返回。对于二进制数据，请使用 'arraybuffer' 或 'uint8array'。

adm-zip 库：在 Node.js 中工作

如果您在 Node.js 上开发服务器端应用程序，adm-zip 可能是更方便的选择。这个库是同步的（但也有异步方法），并支持直接将压缩包写入文件系统。

使用 adm-zip 创建压缩包

import AdmZip from 'adm-zip';import * as path from 'path';

function createArchiveToDisk(): void {  const