JavaScript 如何在线解压 ZIP 文件

作者:阿宝哥 时间:2024-04-22 22:14:58 

目录
  • 一、ZIP 格式简介

  • 二、浏览器解压方案

    • 2.1 定义工具类

    • 2.2 在线解压 ZIP 文件

  • 三、服务器解压方案

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

    • 3.2 在线解压 ZIP 文件

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

  • 四、总结

    • 五、参考资源

      一、ZIP 格式简介

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

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

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

      二、浏览器解压方案

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

      JavaScript 如何在线解压 ZIP 文件

      其实有了 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, 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 文件的功能:

      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 文件的功能已经介绍完了,我们来看一下以上示例的运行结果

      JavaScript 如何在线解压 ZIP 文件

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

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

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

      三、服务器解压方案

      服务器解压方案就是允许用户通过文件 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;
        }
      }

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

      JavaScript 如何在线解压 ZIP 文件

      现在我们已经实现根据文件名解压指定 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()读取文件信息
        }
      }

      由于完整的示例代码内容比较多,阿宝哥就不放具体的代码了。感兴趣的小伙伴,可以访问以下地址浏览示例代码。

      https://gist.github.com/semlinker/3bb9634f4e4ec7b6ab4008a688583115

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

      四、总结

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

      五、参考资源

      * ZIP 格式
      Limitations of JSZip

      来源:https://mp.weixin.qq.com/s/tGrXZ7918NtqX8eh1SdgIw

      标签:JavaScript,解压,zip
      0
      投稿

      猜你喜欢

    • ASP Google的translate API代码

      2011-04-03 11:16:00
    • node.js入门教程迷你书、node.js入门web应用开发完全示例

      2024-05-03 15:57:38
    • Python 使用list和tuple+条件判断详解

      2022-05-13 16:36:39
    • python从入门到精通(DAY 3)

      2023-11-03 08:23:18
    • PyQt5 在QListWidget自定义Item的操作

      2023-07-05 16:35:49
    • 详解Python编程中对Monkey Patch猴子补丁开发方式的运用

      2021-04-15 00:17:15
    • Python利用公共键如何对字典列表进行排序详解

      2022-03-04 01:31:33
    • python实现人性化显示金额数字实例详解

      2023-11-04 12:40:10
    • python获取多线程及子线程的返回值

      2022-01-17 20:44:07
    • ASP利用XMLHTTP实现表单提交以及cookies的发送的代码

      2011-04-15 10:37:00
    • 使用标准的表单字段名

      2008-06-30 14:14:00
    • python爬取m3u8连接的视频

      2023-06-18 13:40:21
    • python提取照片坐标信息的实例代码

      2023-06-01 16:37:10
    • Python中免验证跳转到内容页的实例代码

      2021-03-27 11:19:55
    • js拦截alert对话框另类应用

      2024-04-16 09:53:52
    • 一个滑动门菜单例子源码

      2007-12-31 10:16:00
    • Python3中的bytes类型和str类型

      2022-06-23 08:14:29
    • Python 求向量的余弦值操作

      2022-11-24 22:51:11
    • Python析构函数__del__定义原理解析

      2023-01-02 15:20:29
    • Python如何实现自动发送邮件

      2022-05-09 04:22:55
    • asp之家 网络编程 m.aspxhome.com