zipJS 前端压缩使用

article/2025/10/4 8:38:59

前端在处理文件时，对于大文件或者多个文件上传、下载、编辑，直接使用原文件不方便，最近使用一个可以前端中处理 zip 文件的库，JSzip，主要功能：前端中压缩、解压缩、编辑zip文件。
在这里插入图片描述

在 nodeJS 中，可以使用 JSZip 压缩本地文件。

这个库的官网：https://stuk.github.io/jszip/

安装

浏览器环境

代码下载链接 http://github.com/Stuk/jszip/zipball/master 下载后直接插入到HTML的 script标签中

NPM 环境

使用 npm 安装依赖（如果没有npm，请先安装 nodeJS）

npm install jszip --save

// 使用 require 引入 jszip
var JSZip = require("jszip");// 引入另一个 file-saver 库，用来把压缩好的文件保存到本地
var saveAs = require('file-saver');// 新建一个zip压缩对象实例
var zip = new JSZip();// 压缩一个文件(文件内容可以上传，使用fs模块，或者直接使用字符串)
zip.file("Hello.txt", "Hello World\n");// 压缩一个文件夹，内部包含一个图片（可以压缩多个文件和文件夹）
zip.folder("images").file("smile.gif", imgData, {base64: true});// 异步生成压缩文件
zip.generateAsync({type:"blob"}).then(function(content) {// 保存到本地saveAs(content, "example.zip");
});

这样就可以将浏览器中的文本（文件）保存成 example.zip 格式存储到本地了。

下面是全部的代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><p>Works on firefox, chrome , opera &gt;= 15 and IE &gt;= 10 (but NOT in compatibility view).</p><button id="zip" class="btn btn-primary">click to zip</button><button id="unzip" class="btn btn-primary">click to unzip</button><div id="result_block" class="hidden"><h3>Content :</h3><div id="result"></div><div id="fileContent"></div></div></body><script src="./jquery.js"></script><script src="./jszip.js" ></script><script src="./FileSaver.js"></script><!-- 导入这个插件，可以不用使用下面的 download 函数 --><script type="text/javascript">// 创建一个zip 对象，将文件名和内容读到文件中var zip = new JSZip();zip.file("readme.md", "#### hello\nMichael 测试文件"); // 直接把一个文件放在根目录下面zip.folder("media").file("image1.jpg", "#### hello\nMichael 测试文件").file("image2.png", "#### hello\nMichael 测试文件"); // 在根目录下放一个文件夹 media，内部包含两个模拟图片文件zip.folder("template").file("index.html", "<html><h3>Hello</h3></html>"); // 在根目录下放一个文件夹 template 内部是一个HTML文件。window.result = '';// 将文本压缩zip 并下载$("#zip").on("click", function () {// type: "string"zip.generateAsync({type:"blob"}).then(function (blob) {// 1) generate the zip file// console.log(blob);window.result = blob; // 绑定到全局组件上，使用另一个按钮下载// // 2) trigger the downloadsaveAs(blob, "hello.zip");}, function (err) {$("#blob").text(err);});});// 将 zip 文件解压缩成内容读取。$("#unzip").on("click", function () {JSZip.loadAsync(window.result)// 1) read the Blob.then(function(zip) {console.log(zip);zip.forEach(function (relativePath, zipEntry) {// 2) print entries$("#fileContent").append($("<li>", {text : zipEntry.name}));});}, function (e) {$('#result').append($("<div>", {"class" : "alert alert-danger",text : "Error reading " + window.result.name + ": " + e.message}));});});// 模拟点击，下载文件// fake_click(save_link);function fake_click(obj) {var ev = document.createEvent("MouseEvents");ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);obj.dispatchEvent(ev);}// 下载文件// download("save.txt","hello world");function download(name, data) {var urlObject = window.URL || window.webkitURL || window;var downloadData = new Blob([data]);var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")save_link.href = urlObject.createObjectURL(downloadData);save_link.download = name;fake_click(save_link);}</script>
</html>

注：浏览器环境下，需要设置合适的第三方库 JS 路径，根据本地实际路径设置。

<script src="./jquery.js"></script>
<script src="./jszip.js" ></script>
<script src="./FileSaver.js"></script>

存在的问题：

实际使用中，如果压缩文件很大（例如2G）可能出现缓存区错误（感谢 July 冲鸭的反馈），反馈信息，目前官方没有给出明确的解决方案（官方问题），可以使用 zipjs 压缩普通大小的文件（几十MB没问题）。

截止 2022-08 在 32位操作系统中，压缩超过 2G 的文件，官方还没有给出明确的处理方法（我退岑，官方可能考虑性能问题，以及压缩比例，2G 文件在服务器或者 node 环境下，压缩消耗性能，其他的 tar gz 7z 等压缩算法，压缩后文件更小，也可以考虑其他替代方案）。

如果必须使用 zipJS 压缩大文件，其他大神提交了 PR （https://github.com/Stuk/jszip/pull/791）可以考虑 fork 代码然后改动这个 PR 进行尝试。