JSZip 与 Blob

jszip 是一个 JavaScript 库，可直接在浏览器上创建 zip 压缩档。

百度百科目前还没有相关的收录资料。从这一方面来说用的人还不是很多。今天我研究到了，就分享一下。

jszip 官方网址是：http://stuk.github.io/jszip/

JSZip 安装

• With npm : npm install jszip
• With bower : bower install Stuk/jszip
• With component : component install Stuk/jszip
• Manually : download JSZip and include the file dist/jszip.js or dist/jszip.min.js

JSZip 的使用

JSZip的使用非常简单。使用如下的代码即可实现简单的压缩。

var zip = new JSZip();
zip.file("Hello.txt", "Hello World/n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"blob"})
.then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

浏览器对 JSZip的支持情况如下：

有些项目需要用到的如下操作：

1. 用户通过拖拽或者选择文件的方式，将文件复制到本地
2. 将用户生成的内容保存为本地文件
3. 将用户生成的所有内容（html、js、css、图片、视频等）存入一个压缩包，交给用户下载

压缩方面我们就可以用到上面的JSZip插件。

最开始，我按照官网介绍使用 location 触发下载，小容量内容测试时一切都好，正式导出时Chrome就反复崩溃。Google之，原来Chrome的URL上限是2M，当压缩后的内容超过2M后，就不能再通过 location 触发下载了。没办法继续Google，从国外一个大侠的博客中找到了克敌制胜的法宝：Uint8Array 和 ArrayBuffer。

Uint8Array 和 ArrayBuffer 也是新标准带来的好东西。前者表示一个由8位无符号整数组成的数组，后者则代表一段二进制数据缓冲，这样说大家可能不明白，按照我的理解和用法，就是存储在 Uint8Array（JavaScript 类型数组的一种）的数据可以通过访问其 ArrayBuffer 属性来转化成二进制对象。前文的代码经修改已经可以支持二进制内容的写入，这里不再赘述。

相比外国大侠的解决方案，这样将zip文件保存到本地的做法，牺牲了部分浏览器兼容性（目前只有Chrome支持File API），但是文件名可读性要好的多，也方便通过 XHR2 将文件上传到服务器，相信日后会有更多应用选择我的这种方式。

： » JSZip 与 Blob