本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
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的支持情况如下：
有些项目需要用到的如下操作：
- 用户通过拖拽或者选择文件的方式，将文件复制到本地
- 将用户生成的内容保存为本地文件
- 将用户生成的所有内容（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 将文件上传到服务器，相信日后会有更多应用选择我的这种方式。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » JSZip 与 Blob