不看不知道，一看吓一跳啊，JSZip 这个开源库的第一版居然发布于 12 年前，瞬间有种见识不足的感觉。12 年前在干啥？那时候还在啃书《JavaScript高级程序设计》，一晃眼居然已是 12 年~~

JSZip 能用来干啥？

像 office 的文档，都是用 zip 包的，不信随便找一个 word/ppt/excel 文件，直接将后缀改成 .zip，随便用个解压工具都可以打开看到源码。所以网上能找到的 office 文件解析工具，基本上都先要使用 zip 解压，再进行下一步的解析操作。

还有文件批量下载，如果一次性下载多个，可能会被浏览器拦截，这时候就可以将多个文件打包为一个 zip，只下载一次就行。

JSZip

JSZip 允许使用 JavaScript 创建、读取和编辑.zip文件。

项目仓库：https://github.com/Stuk/jszip
npm 包：https://www.npmjs.com/package/jszip
官网：https://stuk.github.io/jszip/
英文文档：https://stuk.github.io/jszip/documentation/api_jszip.html​
中文文档： 暂无
star 数量： 10.2k (10188)
开源协议： MIT OR GPL-3.0-or-later
npm 周下载量： 1200 万左右
最新版本： 3.10.1
兼容性： Node.js/Browser(IE 6+)
文件大小： 约 94.9 kB (Gzip 27.6 kB)
更新状态： 三年前

官网显示测试过 IE 6/7/8/9/10，个人觉得这信息有点虚，就 IE6 那尿性，要把它给驯服，不下点苦工是不行的！！

就 jsDeliver 的统计数据来看，目前的 IE 全球占比 0.26%，这 0.26 国内又只有 0.08%，所以个人觉得前端编码应该可以放弃 IE 了~~当然还是要看项目具体的使用对象哦！！

注意：开源协议不是单纯的 MIT，这骚操作能不能商用请咨询法务！！

安装

1、npm 安装

1npm install jszip

导入依赖

1
2
3import JSZip from 'jszip';
// orconst JSZip = require('jszip');

2、浏览器端引入

1
2
3
4
5
6<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<!-- ES 模块引入 --><script type="module">  import JSZip from 'https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm'</script>

示例

1、解压 zip 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<p>选择文件：<input type="file" id="file" /></p><p><button id="button">开始解压</button></p><div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script><script>  const button = document.querySelector('#button');
  const fileInput = document.querySelector('#file');
  const output = document.querySelector('#output');
  button.addEventListener('click', async () => {
    const file = fileInput.files[0];
    if (!file) {
      return alert('请选择文件');
    }
    const zip = new JSZip();
    await zip.loadAsync(file);
    const zipFiles = zip.file(/.*/);
    let res = ''    for (let i = 0; i < zipFiles.length; i++) {
      const file = zipFiles[i];
      const blob = await file.async('blob');
      const url = window.URL.createObjectURL(blob);
      res += `<p><a href="${url}" download="${file.name}">下载 ${file.name}</a></p>`;
    }
    output.innerHTML = res;
  })</script>

zip 文件内容：

运行效果：

2、打包 zip 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<button id="button">下载打包文件</button>
<script type="module">  import JSZip from 'https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm'
  button.addEventListener('click', async () => {
    const zip = new JSZip();

    // 添加一个文件    zip.file('hello.txt', 'Hello 前端路引');

    // 创建一个名为 js 的文件夹    const js = zip.folder("js");
    js.file('hello.js', 'console.log("Hello 前端路引")');

    const blob = await zip.generateAsync({type:"blob"})
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '打包文件.zip';
    a.click()
    window.URL.revokeObjectURL(url)
  })
</script>

运行效果：

最后

注意：JSZip 不支持加密 zip 文件解密！！

如果要支持更多的文件类型解压，可以参考下另一个开源库：

https://www.npmjs.com/package/libarchive.js​

JSZip 的使用姿势很多，请参阅官方文档！

也许可以利用 WebWorker 二次封装一下？在浏览器中实现多线程解压，提升下解压速度。

​

阅读原文：https://mp.weixin.qq.com/s/AwCs9tyCYWyZwYg2UQT0Bg