js开源库 JSZip 轻松实现“读写” .zip 文件

JSZip 能用来干啥？

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

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

JSZip

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

1. 项目仓库：点击查看
2. npm 包：点击查看
3. 官网：点击查看
4. 英文文档：点击查看
5. 中文文档： 暂无
6. star 数量： 10.2k (10188)
7. 开源协议： MIT OR GPL-3.0-or-later
8. npm 周下载量： 1200 万左右
9. 最新版本： 3.10.1
10. 兼容性： Node.js/Browser(IE 6+)
11. 文件大小： 约 94.9 kB (Gzip 27.6 kB)
12. 更新状态： 三年前

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

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

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

安装

1、npm 安装

npm install jszip

导入依赖

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

2、浏览器端引入

<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 文件

<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 示例

<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 文件解密！！

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

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

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

以上关于js开源库 JSZip 轻松实现“读写” .zip 文件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。