JavaScript 如何在线解压 ZIP 文件？

时间  2021-08-12
标签 javascript html 前端 java node ios git github 算法 axios 栏目 JavaScript 繁體版
原文   原文链接

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

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

1、ZIP 格式简介

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

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

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

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

2、浏览器解压方案

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

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

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, iterationFn) {
    if (typeof iterationFn !== "function") {
      throw new Error("iterationFn 不是函数类型");
    }
    let zip;
    try {
      zip = await JSZip.loadAsync(data); // JSZip来自于jszip这个库
      zip.forEach(iterationFn);
      return zip;
    } catch (error) {
      throw new error();
    }
  }
}
复制代码

2.2 在线解压 ZIP 文件

利用 ExeJSZip 类的实例，咱们就能够很容易实如今线解压 ZIP 文件的功能：axios

html 代码
<p>
  <label>请输入ZIP文件的线上地址：</label>
  <input type="text" id="zipUrl" />
</p>
<button id="unzipBtn" onclick="unzipOnline()">在线解压</button>
<p id="status"></p>
<ul id="fileList"></ul>
复制代码
JS 代码
const zipUrlEle = document.querySelector("#zipUrl");
const statusEle = document.querySelector("#status");
const fileList = document.querySelector("#fileList");
const exeJSZip = new ExeJSZip();

// 执行在线解压操做
async function unzipOnline() {
  fileList.innerHTML = "";
  statusEle.innerText = "开始下载文件...";
  const data = await exeJSZip.getBinaryContent(
    zipUrlEle.value,
    handleProgress
  );
  let items = "";
  await exeJSZip.iterateZipFile(data, (relativePath, zipEntry) => {
    items += `<li class=${zipEntry.dir ? "caret" : "indent"}> ${zipEntry.name}</li>`;
  });
  statusEle.innerText = "ZIP文件解压成功";
  fileList.innerHTML = items;
}

// 处理下载进度
function handleProgress(progressData) {
  const { percent, loaded, total } = progressData;
  if (loaded === total) {
    statusEle.innerText = "文件已下载，努力解压中";
  }
}
复制代码

好了，在浏览器端如何经过 JSZip 这个库来实如今线解压 ZIP 文件的功能已经介绍完了，咱们来看一下以上示例的运行结果：

如今咱们已经能够在线解压 ZIP 文件了，这时有的小伙伴可能会问，可否预览解压后的文件呢？答案是能够的，由于 JSZip 这个库为咱们提供了 file API，经过这个 API 咱们就能够读取指定文件中的内容。好比这样使用 zip.file("amount.txt").async("arraybuffer") ，以后咱们就能够执行对应的操做来实现文件预览的功能。

须要注意的是，基于 JSZip 的方案并非完美的，它存在一些限制。好比它不支持解压加密的 ZIP 文件，当解压较大的文件时，在 IE 10 如下的浏览器可能会出现闪退问题。此外，它还有一些其它的限制，这里阿宝哥就不详细说明了。感兴趣的小伙伴，能够阅读 Limitations of JSZip 文章中的相关内容。

既然浏览器解压方案存在一些弊端，特别是在线解压大文件的情形，要解决该问题，咱们能够考虑使用服务器解压方案。

3、服务器解压方案

服务器解压方案就是容许用户经过文件 ID 或文件名进行在线解压，接下来阿宝哥将基于 koa 和 node-stream-zip 这两个库来介绍如何实现服务器在线解压 ZIP 文件的功能。若是你对 koa 还不了解的话，建议你先大体阅读一下 koa 的官方文档。

const path = require("path");
const Koa = require("koa");
const cors = require("@koa/cors");
const Router = require("@koa/router");
const StreamZip = require("node-stream-zip");

const app = new Koa();
const router = new Router();
const ZIP_HOME = path.join(__dirname, "zip"); // ZIP文件的根目录
const UnzipCaches = new Map(); // 保存已解压的文件信息

router.get("/", async (ctx) => {
  ctx.body = "服务端在线解压ZIP文件示例（阿宝哥）";
});

// 注册中间件
app.use(cors());
app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
  console.log("app starting at port 3000");
});
复制代码

在以上代码中，咱们使用了 @koa/cors 和 @koa/router 两个中间件并建立了一个简单的 Koa 应用程序。基于上述的代码，咱们来注册一个用于处理在线解压指定文件名的路由。

3.1 根据文件名解压指定 ZIP 文件

app.js
router.get("/unzip/:name", async (ctx) => {
  const fileName = ctx.params.name;
  let filteredEntries;
  try {
    if (UnzipCaches.has(fileName)) { // 优先从缓存中获取
      filteredEntries = UnzipCaches.get(fileName);
    } else {
      const zip = new StreamZip.async({ file: path.join(ZIP_HOME, fileName) });
      const entries = await zip.entries();
      filteredEntries = Object.values(entries).map((entry) => {
        return {
          name: entry.name,
          size: entry.size,
          dir: entry.isDirectory,
        };
      });
      await zip.close();
      UnzipCaches.set(fileName, filteredEntries);
    }
    ctx.body = {
      status: "success",
      entries: filteredEntries,
    };
  } catch (error) {
    ctx.body = {
      status: "error",
      msg: `在线解压${fileName}文件失败`,
    };
  }
});
复制代码

在以上代码中，咱们经过 ZIP_HOME 和 fileName 得到文件的最终路径，而后使用 StreamZip 对象来执行解压操做。为了不重复执行解压操做，阿宝哥定义了一个 UnzipCaches 缓存对象，用来保存已解压的文件信息。定义好上述路由，下面咱们来验证一下对应的功能。

3.2 在线解压 ZIP 文件

html 代码
<p>
  <label>请输入ZIP文件名：</label>
  <input type="text" id="fileName" value="kl_161828427993677" />
</p>
<button id="unzipBtn" onclick="unzipOnline()">在线解压</button>
<p id="status"></p>
<ul id="fileList"></ul>
复制代码
JS 代码
const fileList = document.querySelector("#fileList");
const fileNameEle = document.querySelector("#fileName");

const request = axios.create({
  baseURL: "http://localhost:3000/",
  timeout: 10000,
});

async function unzipOnline() {
  const fileName = fileNameEle.value;
  if(!fileName) return;
  const response = await request.get(`unzip/${fileName}`);
  if (response.data && response.data.status === "success") {
    const entries = response.data.entries;
    let items = "";
    entries.forEach((zipEntry) => {
      items += `<li class=${zipEntry.dir ? "caret" : "indent"}>${ zipEntry.name }</li>`;
    });
    fileList.innerHTML = items;
  }
}
复制代码

以上示例成功运行后的结果以下图所示：

如今咱们已经实现根据文件名解压指定 ZIP 文件，那么咱们能够预览压缩文件中指定路径的文件么？答案也是能够的，利用 zip 对象提供的 entryData(entry: string | ZipEntry): Promise<Buffer> 方法就能够读取指定路径下文件的内容。

3.3 预览 ZIP 文件中指定路径的文件

app.js
router.get("/unzip/:name/entry", async (ctx) => {
  const fileName = ctx.params.name; // ZIP压缩文件名
  const entryPath = ctx.query.path; // 文件的路径
  try {
    const zip = new StreamZip.async({ file: path.join(ZIP_HOME, fileName) });
    const entryData = await zip.entryData(entryPath);
    await zip.close();
    ctx.body = {
      status: "success",
      entryData: entryData,
    };
  } catch (error) {
    ctx.body = {
      status: "error",
      msg: `读取${fileName}中${entryPath}文件失败`,
    };
  }
});
复制代码

在以上代码中，咱们经过 zip.entryData 方法来读取指定路径的文件内容，它返回的是一个 Buffer 对象。当前端接收到该数据时，还须要把接收到的 Buffer 对象转换为 ArrayBuffer 对象，对应的处理方式以下所示：

function toArrayBuffer(buf) {
  let ab = new ArrayBuffer(buf.length);
  let view = new Uint8Array(ab);
  for (let i = 0; i < buf.length; ++i) {
    view[i] = buf[i];
  }
  return ab;
}
复制代码

定义完 toArrayBuffer 函数以后，咱们就能够经过调用 app.js 定义的 API 来实现预览功能，具体的代码以下所示：

async function previewZipFile(path) {
  const fileName = fileNameEle.value; // 获取文件名
  const response = await request.get(
    `unzip/${fileName}/entry?path=${path}`
  );
  if (response.data && response.data.status === "success") {
    const { entryData } = response.data;
    const entryBuffer = toArrayBuffer(entryData.data);
    const blob = new Blob([entryBuffer]);
    // 使用URL.createObjectURL或blob.text()读取文件信息
  }
}
复制代码

因为完整的示例代码内容比较多，阿宝哥就不放具体的代码了。感兴趣的小伙伴，能够访问如下地址浏览示例代码。

gist.github.com/semlinker/3…

注意：以上代码仅供参考，请根据实际业务进行调整。

4、总结

本文阿宝哥介绍了在线解压 ZIP 文件的两种方案，在实际项目中，建议使用服务器解压的方案。这样不只能够解决浏览器的兼容性问题，并且也能够解决大文件在线解压的问题，同时也方便后期扩展支持其它的压缩格式。

关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书（累计下载 3万+）及 11 篇 Vue 3 进阶系列教程。想一块儿学习 TS/Vue 3.0 的小伙伴能够添加阿宝哥微信 —— semlinker。

5、参考资源

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程