JSZip 与 Blob

HTML5 xmt_herman_gcy 1862浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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的支持情况如下:

浏览器对 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 将文件上传到服务器,相信日后会有更多应用选择我的这种方式。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号1:xmtxtt(5000人已满),微信号2:codedq(5000人已满),微信号3:xttblog(超2800)。备注:“xttblog”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

本文原文出处:业余草: » JSZip 与 Blob