JSZip 库的使用指南，这是一个纯 JavaScript 实现的 ZIP 文件处理库，适用于浏览器和 Node.js 环境。内容涵盖安装引入、创建与生成 ZIP 文件、读取本地及远程压缩包、高级功能如流式处理大文件、常见问题的解决方案（如中文乱码、兼容性），以及在前端打包下载、用户上传解析和服务器端处理等实际场景中的应用。文章提供了详细的代码示例和性能优化建议，帮助开发者高效处理 ZIP 文件相关需求。
你是否还在为 Web 应用中的文件打包和解析问题烦恼？无论是用户上传的批量文件处理，还是动态生成的报表打包下载，手动处理 ZIP 文件总是充满挑战。本文将带你掌握 JSZip——这个强大的 JavaScript 库，让你在浏览器和 Node.js 环境中轻松实现 ZIP 文件的创建、读取和编辑功能。读完本文，你将能够：创建自定义结构的 ZIP 文件、解析用户上传的压缩包内容、实现前端文件的批量下载，以及处理各种复杂的 ZIP 文件场景。
JSZip 是一个纯 JavaScript 实现的 ZIP 文件处理库，它提供了简洁优雅的 API，让开发者能够在浏览器和 Node.js 环境中轻松创建、读取和编辑 ZIP 文件。无论是 Web 应用中的文件打包下载，还是服务器端的 ZIP 文件处理，JSZip 都能胜任。
在浏览器环境中，你可以直接通过 CDN 引入 JSZip：
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
在 Node.js 环境中，通过 npm 安装：
npm install jszip --save
然后在代码中引入：
const JSZip = require('jszip');
下面是一个简单的示例，演示如何创建一个包含文本文件的 ZIP 文件并下载：
// 创建一个新的 ZIP 实例
const zip = new JSZip();
// 添加一个文本文件
zip.file("Hello.txt", "Hello World\n");
// 创建一个文件夹并添加文件
const imgFolder = zip.folder("images");
imgFolder.file("smile.gif", imgData, {base64: true});
// 生成 ZIP 文件并下载
zip.generateAsync({type: "blob"}).then(function(content) {
// 使用 FileSaver.js 保存文件
saveAs(content, "example.zip");
});
JSZip 提供了直观的 API 来操作 ZIP 文件内容：
// 创建 ZIP 实例
const zip = new JSZip();
// 添加文件
zip.file("hello.txt", "Hello World\n");
// 创建文件夹
const folder = zip.folder("subfolder");
// 向文件夹添加文件
folder.file("hello.txt", "Hello from subfolder\n");
// 也可以直接使用路径添加文件
zip.file("anotherfolder/goodbye.txt", "Goodbye World\n");
// 更新文件内容
zip.file("hello.txt", "Updated content");
// 删除文件
zip.remove("anotherfolder/goodbye.txt");
创建好 ZIP 文件结构后，使用 generateAsync 方法生成 ZIP 文件内容：
// 生成 Blob 对象并下载
zip.generateAsync({type: "blob"})
.then(function(blob) {
saveAs(blob, "myzip.zip");
});
// 生成 Base64 编码
zip.generateAsync({type: "base64"})
.then(function(base64) {
// 处理 base64 编码
});
// 生成 Uint8Array
zip.generateAsync({type: "uint8array"})
.then(function(uint8array) {
// 处理 Uint8Array
});
生成选项：
type：输出类型，可以是"blob"、"base64"、"uint8array"、"arraybuffer"、"binarystring"或"nodebuffer"(Node.js 环境)compression：压缩方式，"STORE"（不压缩）或"DEFLATE"（默认压缩）compressionOptions：压缩选项，如压缩级别在浏览器中，你可以通过 File API 读取用户上传的 ZIP 文件：
// 监听文件上传事件
document.getElementById('file').addEventListener('change', function(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
const content = e.target.result;
// 加载 ZIP 文件
JSZip.loadAsync(content).then(function(zip) {
// 处理 ZIP 内容
zip.forEach(function(relativePath, zipEntry) {
console.log("文件:", relativePath);
});
});
};
reader.readAsArrayBuffer(file);
});
使用 AJAX 请求读取远程 ZIP 文件：
// 使用 JSZipUtils 获取二进制内容
JSZipUtils.getBinaryContent('path/to/remote.zip', function(err, data) {
if (err) {
throw err; // 处理错误
}
JSZip.loadAsync(data).then(function(zip) {
// 处理 ZIP 文件内容
const file = zip.file("file.txt");
if (file) {
file.async("string").then(function(content) {
console.log("文件内容:", content);
});
}
});
});
读取 ZIP 文件中某个文件的内容：
zip.file("hello.txt").async("string").then(function(content) {
console.log("文件内容:", content);
});
// 支持多种输出格式
zip.file("image.png").async("base64").then(function(base64Data) {
// 处理图片数据
});
zip.file("data.bin").async("uint8array").then(function(uint8Array) {
// 处理二进制数据
});
对于大文件，JSZip 支持流式处理以避免内存问题：
// 在 Node.js 中使用流
zip.generateNodeStream({type: 'nodebuffer', streamFiles: true})
.pipe(fs.createWriteStream('large.zip'))
.on('finish', function() {
console.log("大型 ZIP 文件生成完成");
});
JSZip 能够处理各种复杂的 ZIP 文件场景，包括加密文件、分卷压缩、ZIP64 格式等。例如，处理包含多种格式文件的复杂 ZIP：
// 读取包含多种格式文件的 ZIP
JSZip.loadAsync(complexZipData).then(function(zip) {
// 读取 Excel 文件
zip.file("AntarcticaTemps.xlsx").async("arraybuffer").then(function(data) {
// 处理 Excel 数据
});
// 读取 ODS 文件
zip.file("AntarcticaTemps.ods").async("arraybuffer").then(function(data) {
// 处理 ODS 数据
});
// 读取 EPUB 电子书
zip.file("Franz Kafka - The Metamorphosis.epub").async("arraybuffer").then(function(data) {
// 处理 EPUB 数据
});
});
在 Web 应用中，经常需要将多个文件打包成 ZIP 供用户下载。例如，在线编辑器中多个文件的导出功能：
// 创建 ZIP 文件
const zip = new JSZip();
// 添加 HTML 文件
zip.file("index.html", editor.getValue());
// 添加 CSS 文件
zip.folder("css").file("style.css", styleEditor.getValue());
// 添加 JavaScript 文件
zip.folder("js").file("app.js", scriptEditor.getValue());
// 生成并下载 ZIP
zip.generateAsync({type: "blob"}).then(function(content) {
saveAs(content, "project.zip");
});
处理用户上传的 ZIP 文件，提取其中的内容进行预览或处理：
// 处理用户上传的 ZIP 文件
function handleZipUpload(file) {
const reader = new FileReader();
reader.onload = function(e) {
JSZip.loadAsync(e.target.result).then(function(zip) {
// 显示 ZIP 文件内容列表
displayZipContents(zip);
// 提取特定文件进行预览
const htmlFile = zip.file(/\.html$/i)[0];
if (htmlFile) {
htmlFile.async("string").then(function(content) {
previewHtmlContent(content);
});
}
});
};
reader.readAsArrayBuffer(file);
}
在 Node.js 服务器中，JSZip 可以用于生成动态报告、备份文件等：
const express = require('express');
const JSZip = require('jszip');
const fs = require('fs');
const app = express();
app.get('/download-report', function(req, res) {
const zip = new JSZip();
// 添加动态生成的报告
zip.file("report.txt", generateReport());
// 添加图表图片
zip.file("chart.png", fs.readFileSync("charts/sales.png"), {binary: true});
// 生成 ZIP 并发送给客户端
zip.generateAsync({type: 'nodebuffer'}).then(function(buffer) {
res.setHeader('Content-Type', 'application/zip');
res.setHeader('Content-Disposition', 'attachment; filename="report.zip"');
res.send(buffer);
});
});
ZIP 文件中的文件名和内容可能出现中文乱码，解决方案是指定正确的编码：
// 读取 ZIP 时指定编码
JSZip.loadAsync(zipData, {charset: "GBK"}).then(function(zip) {
// 处理 ZIP 内容
});
处理大文件时，建议使用流式处理以避免内存问题：
// 流式生成 ZIP 文件
const stream = zip.generateNodeStream({type: 'nodebuffer', streamFiles: true});
stream.pipe(fs.createWriteStream('large.zip'))
.on('finish', function() {
console.log("大文件生成完成");
});
虽然 JSZip 支持大部分现代浏览器，但在一些旧浏览器中可能需要 polyfill：
<!-- 为旧浏览器添加 Promise 支持 -->
<script src="https://cdn.bootcdn.net/ajax/libs/es6-promise/4.2.8/es6-promise.min.js"></script>
<!-- 为 IE 添加 FileSaver 支持 -->
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
合理选择压缩策略可以平衡文件大小和处理速度：
// 对文本文件使用高压缩级别
zip.file("document.txt", largeTextContent, { compression: "DEFLATE", compressionOptions: {level: 9} });
// 对已压缩的文件（如图片）使用存储模式
zip.file("image.png", imageData, { compression: "STORE" });
处理大量文件时，及时释放不再需要的资源：
// 处理完文件后删除引用
zip.file("temp.dat").async("uint8array").then(function(data) {
processData(data);
// 删除临时文件
zip.remove("temp.dat");
});
JSZip 是一个功能强大且易于使用的 ZIP 文件处理库，它让 JavaScript 开发者能够轻松实现 ZIP 文件的创建、读取和编辑功能。无论是 Web 应用中的文件打包下载，还是服务器端的 ZIP 文件处理，JSZip 都能提供简洁高效的解决方案。
通过本文的介绍，你已经掌握了 JSZip 的基本用法和高级特性。现在，你可以开始在自己的项目中应用 JSZip，解决各种 ZIP 文件处理需求。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online