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

浏览器对 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

: » JSZip 与 Blob

原创文章,作者:wdmbts,如若转载,请注明出处:https://blog.ytso.com/tech/aiops/251233.html

(0)
上一篇 2022年5月2日 06:13
下一篇 2022年5月2日 06:17

相关推荐

发表回复

登录后才能评论