JSzip库说明
前言
前端在处理文件时，对于大文件或者多个文件上传、下载、编辑，直接使用原文件不方便，最近使用一个可以前端中处理 zip 文件的库，JSzip。主要功能：前端中压缩、解压缩、编辑zip文件。
这个库的官网：https://stuk.github.io/jszip/
安装
浏览器环境
代码下载链接 http://github.com/Stuk/jszip/zipball/master
node 环境
npm install jszip --save
// 使用ES5引入
var JSZip = require("jszip");
var saveAs = require('file-saver');
// 新建一个zip压缩对象实例
var zip = new JSZip();
// 压缩一个文件
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");
});
这样就可以将浏览器中的文本（文件）保存成zip格式存储到本地了。
下面是全部的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Works on firefox, chrome , opera >= 15 and IE >= 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 download
saveAs(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>