JavaScript怎么在线解压ZIP文件

小编给大家分享一下JavaScript怎么在线解压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地址对应的文件内容   getBinaryContenturl, progressFn = ) => {}) {     return new Promiseresolve, reject) => {       if typeof url !== "string" || !/https?:/.testurl))         rejectnew Error"url 参数不合法"));       JSZipUtils.getBinaryContenturl, { // JSZipUtils来自于jszip-utils这个库         progress: progressFn,         callback: err, data) => {           if err) {             rejecterr);           } else {             resolvedata);           }         },       });     });   }      // 遍历Zip文件   async iterateZipFiledata, iterationFn) {     if typeof iterationFn !== "function") {       throw new Error"iterationFn 不是函数类型");     }     let zip;     try {       zip = await JSZip.loadAsyncdata); // JSZip来自于jszip这个库       zip.forEachiterationFn);       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.iterateZipFiledata, relativePath, zipEntry) => {     items += `<li class=${zipEntry.dir ? "caret" : "indent"}>       ${zipEntry.name}</li>`;   });   statusEle.innerText = "ZIP文件解压成功";   fileList.innerHTML = items; }  // 处理下载进度 function handleProgressprogressData) {   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.usecors)); app.userouter.routes)).userouter.allowedMethods));  app.listen3000, ) => {   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.hasfileName)) { // 优先从缓存中获取       filteredEntries = UnzipCaches.getfileName);     } else {       const zip = new StreamZip.async{ file: path.joinZIP_HOME, fileName) });       const entries = await zip.entries);       filteredEntries = Object.valuesentries).mapentry) => {         return {           name: entry.name,           size: entry.size,           dir: entry.isDirectory,         };       });       await zip.close);       UnzipCaches.setfileName, 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.forEachzipEntry) => {       items += `<li class=${zipEntry.dir ? "caret" : "indent"}>${         zipEntry.name       }</li>`;     });     fileList.innerHTML = items;   } }

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

JavaScript怎么在线解压ZIP文件

现在我们已经实现根据文件名解压指定 ZIP 文件,那么我们可以预览压缩文件中指定路径的文件么?答案也是可以的,利用 zip 对象提供的  entryDataentry: string | ZipEntry): Promise方法就可以读取指定路径下文件的内容。

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.joinZIP_HOME, fileName) });     const entryData = await zip.entryDataentryPath);     await zip.close);     ctx.body = {       status: "success",       entryData: entryData,     };   } catch error) {     ctx.body = {       status: "error",       msg: `读取${fileName}中${entryPath}文件失败`,     };   } });

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

function toArrayBufferbuf) {   let ab = new ArrayBufferbuf.length);   let view = new Uint8Arrayab);   for let i = 0; i < buf.length; ++i) {     view[i] = buf[i];   }   return ab; }

定义完 toArrayBuffer 函数之后,我们就可以通过调用 app.js 定义的 API 来实现预览功能,具体的代码如下所示:

async function previewZipFilepath) {   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 = toArrayBufferentryData.data);     const blob = new Blob[entryBuffer]);     // 使用URL.createObjectURL或blob.text)读取文件信息   } }

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

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

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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注