深入解析zip.js：JavaScript中的高效ZIP压缩解压库

嵇子高Quintessa

于 2025-06-11 09:02:04 发布

阅读量335

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00489/article/details/148575218

深入解析zip.js：JavaScript中的高效ZIP压缩解压库

zip.js JavaScript library to zip and unzip files supporting multi-core compression, compression streams, zip64, split files and encryption. 项目地址: https://gitcode.com/gh_mirrors/zi/zip.js

项目概述

zip.js是一个功能强大的JavaScript开源库，采用BSD-3-Clause许可证，专注于在浏览器环境中处理ZIP文件的压缩和解压缩操作。该库经过精心设计，能够高效处理大规模数据，为现代Web应用提供了强大的文件处理能力。

核心特性

高性能处理：支持多核压缩，充分利用现代设备的计算能力
大文件支持：通过Zip64技术完美处理超过4GB的大型压缩文件
先进压缩技术：支持原生压缩流(Compression Streams API)
分卷压缩：支持拆分ZIP文件，便于大文件传输
数据安全：提供数据加密功能，保护敏感信息
跨平台兼容：完美适配各种现代浏览器和JavaScript运行时环境

基础使用示例

简单文本压缩示例

import {
  BlobReader,
  BlobWriter,
  TextReader,
  TextWriter,
  ZipReader,
  ZipWriter,
} from "zip.js库路径";

// 创建ZIP写入器
const zipFileWriter = new BlobWriter();
const textContent = new TextReader("你好，世界！");

// 创建ZIP文件
const zipWriter = new ZipWriter(zipFileWriter);
await zipWriter.add("greeting.txt", textContent);
await zipWriter.close();

// 获取生成的ZIP文件Blob对象
const zipFileBlob = await zipFileWriter.getData();

// 读取ZIP文件内容
const zipFileReader = new BlobReader(zipFileBlob);
const outputWriter = new TextWriter();

const zipReader = new ZipReader(zipFileReader);
const firstEntry = (await zipReader.getEntries())[0];
const extractedText = await firstEntry.getData(outputWriter);
await zipReader.close();

console.log(extractedText); // 输出: "你好，世界！"

流式处理示例

对于大文件处理，流式API能显著提升性能和内存效率：

import {
  BlobReader,
  ZipReader,
  ZipWriter,
} from "zip.js库路径";

// 创建转换流处理ZIP文件
const zipStream = new TransformStream();
const zipBlobPromise = new Response(zipStream.readable).blob();
const contentStream = new Blob(["流式处理示例内容"]).stream();

// 流式写入
const zipWriter = new ZipWriter(zipStream.writable);
await zipWriter.add("stream-demo.txt", contentStream);
await zipWriter.close();

// 获取ZIP文件
const zipBlob = await zipBlobPromise;

// 流式读取
const zipReader = new ZipReader(new BlobReader(zipBlob));
const outputStream = new TransformStream();
const textPromise = new Response(outputStream.readable).text();

const entries = await zipReader.getEntries();
await entries[0].getData(outputStream.writable);
await zipReader.close();

console.log(await textPromise); // 输出: "流式处理示例内容"

高级应用场景

并行添加多个文件

zip.js支持并发操作，可以同时添加多个文件到ZIP中：

import {
  BlobWriter,
  HttpReader,
  TextReader,
  ZipWriter,
} from "zip.js库路径";

async function createMultiFileZip() {
  const zipWriter = new ZipWriter(new BlobWriter("application/zip"));
  
  await Promise.all([
    zipWriter.add("note.txt", new TextReader("这是文本备注")),
    zipWriter.add("config.json", new TextReader(JSON.stringify({key: "value"}))),
    // 可以从URL直接添加文件
    zipWriter.add("remote-file.html", new HttpReader("https://example.com/file.html"))
  ]);
  
  return zipWriter.close();
}

// 使用示例
createMultiFileZip().then(blob => {
  // 处理生成的ZIP文件
});