JSZip 使用指南：JavaScript 创建、读取与编辑 ZIP 文件

创建 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 文件

创建好 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：压缩选项，如压缩级别

读取 ZIP 文件

读取本地 ZIP 文件

在浏览器中，你可以通过 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); 
}); 

读取远程 ZIP 文件

使用 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 文件生成完成"); 
}); 

处理复杂 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 数据 
    }); 
}); 

实际应用场景

1. 前端文件打包下载

在 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"); 
}); 

2. 解析用户上传的 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); 
} 

3. 服务器端 ZIP 文件处理

在 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 文件处理需求。