清华教授！亲手教你JavaScript 在线解压 ZIP 文件，实战理论全都有

相信大家对 ZIP 文件都不会陌生，当你要打开本地的 ZIP 文件时，你就需要先安装支持解压 ZIP 文件的解压软件。但如果预解压的 ZIP 文件在服务器上，我们应该如何处理呢？最简单的一种方案就是把文件下载到本地，然后使用支持 ZIP 格式的解压软件进行解压。那么能不能在线解压 ZIP 文件呢？答案是可以的，接下来阿宝哥将介绍浏览器解压和服务器解压两种在线解压 ZIP 文件的方案。

在介绍在线解压 ZIP 文件的两种方案前，我们先来简单了解一下 ZIP 文件格式。

一、ZIP 格式简介

ZIP 文件格式是一种数据压缩和文档储存的文件格式，原名 Deflate，发明者为菲尔·卡茨（Phil Katz），他于 1989 年 1 月公布了该格式的资料。ZIP 通常使用后缀名 “.zip”，它的 MIME 格式为 “application/zip”。目前，ZIP 格式属于几种主流的压缩格式之一，其竞争者包括RAR 格式以及开放源码的 7z 格式。

ZIP 是一种相当简单的分别压缩每个文件的存档格式，分别压缩文件允许不必读取另外的数据而检索独立的文件。理论上，这种格式允许对不同的文件使用不同的算法。然而，在实际上，ZIP 大多数都是在使用卡茨（Katz）的 DEFLATE 算法。

简单介绍完 ZIP 格式，接下来阿宝哥先来介绍基于 JSZip 这个库的浏览器解压方案。

关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书（累计下载 3万+）及 11 篇 Vue 3 进阶系列教程。

二、浏览器解压方案

JSZip 这是一个用于创建、读取和编辑 .zip 文件的 JavaScript 库，该库支持大多数浏览器，具体的兼容性如下图所示：

其实有了 JSZip 这个库的帮助，要实现浏览器端在线解压 ZIP 文件的功能并不难。因为官方已经为我们提供了 解压本地文件、解压远程文件和生成 ZIP 文件 的完整示例。好的，废话不多说，下面我们来一步步实现在线解压 ZIP 文件的功能。

2.1 定义工具类

浏览器端在线解压 ZIP 文件的功能，可以拆分为 下载 ZIP 文件、解析 ZIP 文件和展示 ZIP 文件 3 个小功能。考虑到功能复用性，阿宝哥把下载 ZIP 文件和解析 ZIP 文件的逻辑封装在 ExeJSZip 类中：

class ExeJSZip {
  // 用于获取url地址对应的文件内容
  getBinaryContent(url, progressFn = () => {}) {
    return new Promise((resolve, reject) => {
      if (typeof url !== "string" || !/https?:/.test(url))
        reject(new Error("url 参数不合法"));
      JSZipUtils.getBinaryContent(url, { // JSZipUtils来自于jszip-utils这个库
        progress: progressFn,
        callback: (err, data) => {
          if (err) {
            reject(err);
          } else {
            resolve(data);
          }
        },
      });
    });
  }
  
  // 遍历Zip文件
  async iterateZipFile(data