,,JavaScript 如何在线解压 ZIP 文件

本文将介绍在线ZIP文件解压缩的两种方案：浏览器解压缩和服务器解压缩。用JavaScript帮你实现在线解压，有兴趣的朋友可以参考一下。

ZIP文件格式是一种用于数据压缩和文档存储的文件格式。最初命名为Deflate，是由菲利普卡兹发明的，他在1989年1月发表了这种格式的数据。ZIP通常使用后缀“.”。zip”，其MIME格式为“application/zip”。目前，ZIP格式是几种主流压缩格式之一，其竞争对手包括开源代码的RAR格式和7z格式。

ZIP是一种相当简单的归档格式，它单独压缩每个文件，这样就可以在不读取其他数据的情况下检索独立的文件。理论上，这种格式允许不同的算法用于不同的文件。然而，在实践中，大多数zip都使用Katz的DEFLATE算法。

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

二、浏览器解压方案

JS是一个用于创建、阅读和编辑的JavaScript库。压缩文件。该库支持大多数浏览器，其具体兼容性如下图所示：

其实借助JSZip库，在浏览器端实现在线解压Zip文件的功能并不难。因为官方已经给我们提供了完整的解压本地文件，解压远程文件，生成ZIP文件的例子。好了，事不宜迟，我们来一步步实现在线解压zip文件的功能。

2.1定义工具类别

浏览器在线解压zip文件的功能可以分为三个小功能：下载ZIP文件，解析ZIP文件，显示ZIP文件。考虑到函数的复用性，Po Ge在ExeJSZip类中封装了下载ZIP文件和解析ZIP文件的逻辑：

classExeJSZip{

//用于获取url地址对应的文件内容

getBinaryContent(url，progressFn=()={}){

returnnewPromise((resolve，reject)={

if(typeofurl！=='string'||！/https？/.测试(url))

Reject(新错误(“非法URL参数”))；

JSZIPUTILS。GetBinaryContent (URL，{//JSZIPUTILS来自库jszip-utils

进展：进步Fn，

回调：(err，data)={

如果(错误){

拒绝(err)；

}否则{

解决(数据)；

}

});

}

//遍历Zip文件

asynciterateZipFile(数据，迭代Fn){

if(typeofiterationFn！=='函数'){

ThrownewError('iterationFn不是函数类型')；

}

letzip

尝试{

zip=awaitjszip . load async(data)；//JSZip来自库JSZip。

zip . foreach(iteration fn)；

returnzip

}catch(错误){

thrownewerror()；

}

2.2在线解压缩ZIP文件

有了ExeJSZip类的实例，我们就可以轻松实现在线解压Zip文件的功能：

Html代码

标签请输入ZIP文件的在线地址：/label

inputtype='text'id='zipUrl'/

buttonid=' unzipptn ' onclick=' unzipponline()'在线解压缩/按钮

pid='status'/p

ulid='文件列表'/ul

javascript，javascript

constzipUrlEle=document . query selector(' # zipUrl ')；

conststatusEle=document . query selector(' # status ')；

const file list=document . query selector(' # file list ')；

constexjszip=newExeJSZip()；

//执行在线解压缩操作。

asyncpfunctionunziponline(){

file list . innerhtml=“”；

StatusEle.innerText='开始下载文件.'；

const data=awaitexejszip . getbinarycontent(

zipUrlEle.value，

处理进度

);

let items=“”；

awaitexejszip . iterate zip file(data，(relativePath，zipEntry)={

items=`liclass=${zipEntry.dir？插入符号':'缩进' }

$ { zip entry . name }/Li `；

});

StatusEle.innerText='ZIP文件解压缩成功'；

fileList.innerHTML=items

}

//处理下载进度

functionhandleProgress(progress data){

const{percent，loaded，total }=progressData

if(loaded===total){

StatusEle.innerText='文件已下载，正在解压缩'；

}

好了，如何在浏览器端实现通过JSZip库在线解压zip文件的功能已经介绍过了。让我们来看看上面例子的运行结果。

现在已经可以在线解压ZIP文件了，可能有朋友会问，可以预览解压后的文件吗？答案是肯定的，因为JSZip库为我们提供了文件API，通过它我们可以读取指定文件的内容。例如，使用zip.file ('amount.txt ')。async('数组缓冲')，然后我们就可以进行相应的操作来实现文件预览的功能。

需要注意的是，基于JSZip的方案并不完美，它有一定的局限性。例如，它不支持加密ZIP文件的解压缩。解压大文件时，IE 10以下的浏览器可能会出现闪回问题。另外它还有一些其他的限制，Po在这里就不细说了。感兴趣的朋友，可以阅读JSZip的局限性一文中的相关内容。

由于浏览器解压方案存在一些弊端，特别是在大文件在线解压的情况下，可以考虑使用服务器解压方案来解决这个问题。

三、服务器解压缩方案

服务器解压缩方案是允许用户通过文件ID或文件名在线解压缩文件。接下来，Po Ge将介绍如何基于koa和node-stream-zip实现服务器在线解压ZIP文件的功能。如果你对koa一无所知，建议你先看看koa的官方文档。

const path=require(' path ')；

const KOA=require(' KOA ')；

const CORS=require(' @ KOA/CORS ')；

constrator=require(' @ KOA/router ')；

constStreamZip=require(' node-stream-zip ')；

constapp=new KOA()；

constr outer=new router()；

const zip _ HOME=path . join(_ _ dirname，' zip ')；//ZIP文件的根目录

constUnzipCaches=new map()；//保存解压缩后的文件信息。

router.get('/'，async(ctx)={

Ctx.body='服务器端在线解压缩zip文件(Po Ge)的示例'；

});

//注册中间件

app . use(CORS())；

app.use(router.routes())。使用(router . allowed methods())；

app.listen(3000，()={

console . log(' appstartingatport 3000 ')；

});

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

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

app.js

router.get('/unzip/:name '，async(ctx)={

const文件名=CTX . params . name；

letfilteredEntries

尝试{

if(unzipcaches . has(filename)){//先从缓存中获取。

filtered entries=unzipcaches . get(文件名)；

}否则{

const ZIP=newstreamzip . async({ file:path . join(ZIP _ HOME，fileName)})；

const entries=awaitzip . entries()；

filteredEntries=Object.values(条目)。映射((条目)={

返回{

名称：entry.name，

尺寸：入口.尺寸，

dir:entry . is目录，

};

});

awaitzip . close()；

UnzipCaches.set(文件名，filtered entries)；

}

ctx.body={

状态：“成功”，

条目：已过滤条目，

};

}catch(错误){

ctx.body={

状态：“错误”，

邮件： `在线解压缩${fileName}文件失败`，

};

}

});

在上面的代码中，我们通过ZIP_HOME和fileName获取文件的最终路径，然后使用StreamZip对象执行解压缩操作。为了避免重复的解压缩操作，页面定义了一个UnzipCaches缓存对象来存储解压缩后的文件信息。定义了上述路线后，让我们验证相应的功能。

3.2在线解压缩ZIP文件

Html代码

标签请输入ZIP文件名：/label

input type=' text ' id=' fileName ' value=' KL _ 161828427993677 '/

buttonid=' unzipptn ' onclick=' unzipponline()'在线解压缩/按钮

pid='status'/p

ulid='文件列表'/ul

javascript，javascript

const file list=document . query selector(' # file list ')；

const fileName ele=document . query select(' # fileName ')；

constraquest=axios . create({

baseURL:'http://localhost:3000/'，

超时：10000，

});

asyncpfunctionunziponline(){

const filename=filename ele . value；

如果(！文件名)返回；

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=`liclass=${zipEntry.dir？插入符号':'缩进' }${

zipEntry.name

}/Li `；

});

fileList.innerHTML=items

}

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

现在我们已经实现了根据文件名对指定的ZIP文件进行解压缩，是否可以在压缩文件中预览指定路径的文件？答案也是可能的。可以使用zip对象提供的entry data(entry:string | zip entry):promise buffer方法读取指定路径下的文件内容。

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

app.js

router.get('/unzip/:name/entry '，async(ctx)={

const文件名=CTX . params . name；//ZIP压缩文件名

constentryPath=CTX . query . path；//文件的路径

尝试{

const ZIP=newstreamzip . async({ file:path . join(ZIP _ HOME，fileName)})；

constentry data=awaitzip . entry data(entry path)；

awaitzip . close()；

ctx.body={

状态：“成功”，

entryData:entryData，

};

}catch(错误){

ctx.body={

状态：“错误”，

邮件： `无法读取${fileName}中的${entryPath}文件，

};

}

});

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

functiontoArrayBuffer(buf){

letab=newArrayBuffer(buf . length)；

let view=new uint 8 array(ab)；

for(leti=0；ibuf.lengthi){

view[I]=buf[I]；

}

退货b；

}

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

asyncfunctionpreviewZipFile(路径){

const filename=filename ele . value；//获取文件名

constresponse=awaitrequest.get(

` unzip/${fileName}/entry？path=${path} `

);

if(response . data response . data . status===' success '){

const { entry data }=response . data；

constentry buffer=toArrayBuffer(entry data . data)；

const blob=new blob([entry buffer])；

//使用URL.createObjectURL或blob.text()读取文件信息

}

因为完整的样本代码内容比较多，Po哥就不放具体代码了。感兴趣的伙伴可以访问以下地址浏览示例代码。

https://gist . github . com/SEM linker/3bb 9634 f 4 e 4c 7 b 6 ab 4008 a 688583115

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

四。摘要

本文介绍了两种在线解压ZIP文件的方案。在实际项目中，建议使用服务器解压缩方案。这样既能解决浏览器的兼容性问题，又能解决大文件的在线解压问题。同时便于后期扩展支持其他压缩格式。

动词（verb的缩写）参考资源

维基百科ZIP格式

JSZip的局限性

以上是JavaScript如何在线解压ZIP文件的细节。更多关于JavaScript在线解压zip文件的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录

相关文章阅读