js gzip压缩(jszip读取文件)
js gzip压缩(jszip读取文件),本文通过数据整理汇集了js gzip压缩(jszip读取文件)相关信息，下面一起看看。
相信大家对ZIP文件都很熟悉。当你想打开一个本地ZIP文件时，你需要先安装支持ZIP文件解压的解压软件。但是如果预解压的ZIP文件在服务器上，我们该怎么办呢？最简单的解决方法就是在本地下载文件，然后使用支持ZIP格式的解压软件进行解压。那么可以在线解压ZIP文件吗？答案是肯定的。接下来阿宝哥将介绍两种在线解压ZIP文件的方案：浏览器解压和服务器解压。
在介绍两种在线解压ZIP文件的方案之前，让让我们简单看一下zip文件格式。
ZIP文件格式是一种用于数据压缩和文档存储的文件格式。最初命名为Deflate，是由菲利普卡兹发明的，他在1989年1月发表了这种格式的数据。ZIP通常使用后缀 。zip ，其MIME格式为 应用程序/zip ；目前，ZIP格式是几种主流压缩格式之一，其竞争对手包括开源代码的RAR格式和7z格式。
ZIP是一种相当简单的归档格式，它单独压缩每个文件，这样就可以在不读取其他数据的情况下检索独立的文件。理论上，这种格式允许不同的算法用于不同的文件。然而，在实践中，大多数zip都使用Katz # s DEFLATE算法。
简单介绍完ZIP格式，接下来，阿宝哥先介绍一下基于JSZip库的浏览器解压方案。
注意 全栈修仙之路 并阅读4本免费电子书(共3万次下载)和11本阿宝哥创作的Vue 3高级系列教程。
JS这是一个用于创建、阅读和编辑的JavaScript库。压缩文件。该库支持大多数浏览器，具体兼容性如下图所示：
其实借助JSZip库，在浏览器端实现在线解压Zip文件的功能并不难。因为官方已经给我们提供了完整的解压本地文件，解压远程文件，生成ZIP文件的例子。好了，事不宜迟，让一步一步实现在线解压zip文件的功能。
浏览器在线解压zip文件的功能可以分为三个小功能：下载ZIP文件，解析ZIP文件，显示ZIP文件。考虑到函数的复用性，Po Ge在ExeJSZip类中封装了下载ZIP文件和解析ZIP文件的逻辑：
ExeJSZip类{
//用于获取url地址对应的文件内容
getBinaryContent(url，progressFn=()={}) {
返回新承诺((解决，拒绝)={
if(URL的类型！==#;字符串|| !/https？/.测试(url))
拒绝(新错误(非法的URL参数));
JSZIPUTILS。GetBinaryContent (URL，{//JSZIPUTILS来自库jszip-utils
进展：进步Fn，
回调：(err，data)={
如果(错误){
拒绝(err)；
}否则{
解决(数据)；
}
},
});
});
}
//遍历Zip文件
异步迭代文件(数据，迭代Fn) {
if(迭代类型Fn！==#;函数) {
抛出新错误(iterationFn不是函数类型);
}
让zip
尝试{
zip=await jszip . load async(data)；//JSZip来自库JSZip。
zip . foreach(iteration fn)；
返回zip
} catch(错误){
抛出新错误()；
}
}
}
有了ExeJSZip类的实例，我们就可以轻松实现在线解压Zip文件的功能：
请输入ZIP文件的在线地址：
在线解压
const zipUrlEle=document . query selector(# zipUrl # );
const status ele=document . query selector(#状态);
const file list=document . query selector(#文件列表);
const exeJSZip=new exeJSZip()；
//执行在线解压缩操作。
异步函数unzipOnline() {
fileList.innerHTML= # #;
StatusEle.innerText= # 开始下载文件.#;
const data=await exejszip . getbinarycontent(
zipUrlEle.value，
处理进度
);
let items= # #;
await exejszip . iterate zipfile(data，(relativePath，zipEntry)={
项目=`个
$ { zip entry . name } `；
});
StatusEle.innerText= # ZIP文件解压缩成功
fileList.innerHTML=items
}
//处理下载进度
函数handleProgress(progressData) {
const { percent，loaded，total }=progressData
if (loaded===total) {
StatusEle.innerText= # 文件已经下载，正在解压缩
}
好了，如何在浏览器端实现通过JSZip库在线解压zip文件的功能已经介绍过了。让让我们看看上面例子的运行结果：
现在已经可以在线解压ZIP文件了，可能有朋友会问，可以预览解压后的文件吗？答案是肯定的，因为JSZip库为我们提供了文件API，通过它我们可以读取指定文件的内容。例如，使用zip . file(amount.txt # ).异步(数组缓冲)，然后我们就可以进行相应的操作来实现文件预览的功能。
需要注意的是，基于JSZip的方案并不完美，它有一定的局限性。例如，它不t支持加密ZIP文件的解压缩。解压大文件时，IE 10以下的浏览器可能会出现闪回问题。另外它还有一些其他的限制，Po在这里就不细说了。感兴趣的朋友，可以阅读JSZip的局限性一文中的相关内容。
由于浏览器解压方案存在一些弊端，特别是在大文件在线解压的情况下，可以考虑使用服务器解压方案来解决这个问题。
服务器解压缩方案是允许用户通过文件ID或文件名在线解压缩文件。接下来，Po Ge将介绍如何基于koa和node-stream-zip实现服务器在线解压ZIP文件的功能。如果你不我对koa一无所知，建议你先看看koa的官方文件。
const path=require(路径);
const Koa=require(koa # );
const CORS=require(@ KOA/CORS );
const Router=require(@ KOA/router );
const stream zip=require(节点-流-zip );
const app=new Koa()；
const router=新路由器()；
const ZIP _ HOME=path . join(_ _ dirname，zip # );zip文件的根目录
const UnzipCaches=new Map()；//保存解压缩后的文件信息。
router . get(/#;异步(ctx)={
Ctx.body= # 服务器端在线解压zip文件(Po Ge)的例子
});
//注册中间件
app . use(CORS())；
app.use(router.routes())。使用(router . allowed methods())；
app.listen(3000，()={
console . log(从端口3000开始的应用);
});
在上面的代码中，我们使用了两个中间件@Koa/cors和@koa/router，并创建了一个简单的Koa应用程序。基于以上代码，让注册一个路由来处理指定文件名的在线解压缩。
router . get(/unzip/:name 异步(ctx)={
const文件名=CTX . params . name；
让筛选条目；
尝试{
if(unzipcaches . has(filename)){//先从缓存中获取。
filtered entries=unzipcaches . get(文件名)；
}否则{
const ZIP=new stream ZIP . async({ file:path . join(ZIP _ HOME，文件名)})；
const entries=await zip . entries()；
filteredEntries=Object.values(条目)。映射((条目)={
返回{
名称：entry.name，
尺寸：入口.尺寸，
dir:entry . is目录，
};
});
await zip . close()；
UnzipCaches.set(文件名，filtered entries)；
}
ctx.body={
状态：成功
条目：已过滤条目，
};
} catch(错误){
ctx.body={
状态：错误
邮件： `在线解压缩${fileName}文件失败`，
};
}
});
在上面的代码中，我们通过ZIP_HOME和fileName获取文件的最终路径，然后使用StreamZip对象执行解压缩操作。为了避免重复的解压缩操作，页面定义了一个UnzipCaches缓存对象来存储解压缩后的文件信息。定义了上述路线后，让验证相应的功能。
请输入ZIP文件名：
在线解压
const file list=document . query selector(#文件列表);
const filename ele=document . query selector(#文件名);
const request=axios.create({
base URL:http://localhost:3000/
超时：10000，
});
异步函数unzipOnline() {
const fileName=fileName ele . value；
如果(！文件名)返回；
const response=await request . get(` unzip/$ { fileName } `)；
if(response . data response . data . status===成功) {
const entries=response . data . entries；
let items= # #;
entries.forEach((zipEntry)={
items=`${
zipEntry.name
}`;
});
fileList.innerHTML=items
}
}
上述示例成功运行后的结果如下图所示：
现在我们已经实现了根据文件名对指定的ZIP文件进行解压缩，是否可以在压缩文件中预览指定路径的文件？答案也是可能的。可以使用zip对象提供的entry data(entry:string | zip):promise方法读取指定路径下的文件内容。
router . get(/unzip/:name/entry 异步(ctx)={
const文件名=CTX . params . name；//ZIP压缩文件名
const entry path=CTX . query . path；//文件的路径
尝试{
const ZIP=new stream ZIP . async({ file:path . join(ZIP _ HOME，文件名)})；
const entry data=await zip . entry data(entry path)；
await zip . close()；
ctx.body={
状态：成功
entryData: entryData，
};
} catch(错误){
ctx.body={
状态：错误
邮件： `无法读取${fileName}中的${entryPath}文件，
};
}
});
在上面的代码中，我们通过zip.entryData方法读取指定路径的文件内容，该方法返回一个Buffer对象。当前端接收数据时，也需要将接收到的Buffer对象转换为ArrayBuffer对象，对应的处理方法如下：
函数toArrayBuffer(buf) {
设ab=new array buffer(buf . length)；
let view=new uint 8 array(ab)；
for(设I=0；i buf.lengthi) {
view[I]=buf[I]；
}
返回ab；
}
定义了toArrayBuffer函数后，我们可以通过调用app.js定义的API来实现预览功能，具体代码如下：
异步函数previewZipFile(路径){
const fileName=fileName ele . value；//获取文件名
const response=await request.get(
` unzip/${fileName}/entry？path=${path} `
);
if(response . data response . data . status===成功) {
const { entry data }=response . data；
const entry buffer=toArrayBuffer(entry data . data)；
const Blob=new Blob([entry buffer])；
//使用URL.createObjectURL或blob.text()读取文件信息
}
}
因为完整的样本代码内容比较多，Po哥就不放具体代码了。感兴趣的伙伴可以访问以下地址浏览示例代码。
gist.github.com/semlinker/3…
注：以上代码仅供参考，请根据实际业务进行调整。
两种在线解压ZIP文件的方案。在实际项目中，推荐使用服务器解压的方案。这样既能解决浏览器的兼容性问题，又能解决大文件的在线解压问题。同时便于后期扩展支持其他压缩格式。
更多js gzip压缩(jszip读取文件)相关信息请关注本站。
