如何使用JavaScript在线实现ZIP文件解压操作？

本文共计1477个文字，预计阅读时间需要6分钟。

目录

一、ZIP 格式简介

二、浏览器解压方案

2.1 定义工具类 2.2 在线解压 ZIP 文件

三、服务器端解压方案

3.1 解压指定文件名 ZIP 文件 3.2 在线解压 ZIP 文件 3.3 预览指定路径的 ZIP 文件

目录

• 一、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 库，该库支持大多数浏览器，具体的兼容性如下图所示：

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

2.1 定义工具类

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

classExeJSZip{ //用于获取url地址对应的文件内容 getBinaryContent(url,progressFn=()=>{}){ returnnewPromise((resolve,reject)=>{ if(typeofurl!=="string"||!/localhost:3000/", timeout:10000, }); asyncfunctionunzipOnline(){ constfileName=fileNameEle.value; if(!fileName)return; constresponse=awaitrequest.get(`unzip/${fileName}`); if(response.data&&response.data.status==="success"){ constentries=response.data.entries; letitems=""; entries.forEach((zipEntry)=>{ items+=`<liclass=${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)=>{ constfileName=ctx.params.name;//ZIP压缩文件名 constentryPath=ctx.query.path;//文件的路径 try{ constzip=newStreamZip.async({file:path.join(ZIP_HOME,fileName)}); constentryData=awaitzip.entryData(entryPath); awaitzip.close(); ctx.body={ status:"success", entryData:entryData, }; }catch(error){ ctx.body={ status:"error", msg:`读取${fileName}中${entryPath}文件失败`, }; } });

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

functiontoArrayBuffer(buf){ letab=newArrayBuffer(buf.length); letview=newUint8Array(ab); for(leti=0;i<buf.length;++i){ view[i]=buf[i]; } returnab; }

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

asyncfunctionpreviewZipFile(path){ constfileName=fileNameEle.value;//获取文件名 constresponse=awaitrequest.get( `unzip/${fileName}/entry?path=${path}` ); if(response.data&&response.data.status==="success"){ const{entryData}=response.data; constentryBuffer=toArrayBuffer(entryData.data); constblob=newBlob([entryBuffer]); //使用URL.createObjectURL或blob.text()读取文件信息 } }

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

gist.github.com/semlinker/3bb9634f4e4ec7b6ab4008a688583115

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

四、总结

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

五、参考资源

维基百科 ZIP 格式
Limitations of JSZip

以上就是JavaScript 如何在线解压 ZIP 文件的详细内容，更多关于JavaScript在线解压 ZIP 文件的资料请关注自由互联其它相关文章！