本文已参与「新人创作礼」活动，一起开启掘金创作之路。
接到新需求：下载的文件是一个zip压缩文件，分两种情况，1.压缩文件内是一个需要的文件2.文件内又是一个zip，需要解压缩两次。
ZIP 文件格式是一种数据压缩和文档储存的文件格式，原名 Deflate，发明者为菲尔·卡茨（Phil Katz），他于 1989 年 1 月公布了该格式的资料。ZIP 通常使用后缀名 “.zip”，它的 MIME 格式为 “application/zip”。目前，ZIP 格式属于几种主流的压缩格式之一，其竞争者包括RAR 格式以及开放源码的 7z 格式。
ZIP 是一种相当简单的分别压缩每个文件的存档格式，分别压缩文件允许不必读取另外的数据而检索独立的文件。理论上，这种格式允许对不同的文件使用不同的算法。然而，在实际上，ZIP 大多数都是在使用卡茨（Katz）的 DEFLATE 算法。
JSZip 这是一个用于创建、读取和编辑 .zip 文件的 JavaScript 库，该库支持大多数浏览器.
其实有了 JSZip 这个库的帮助，要实现浏览器端在线解压 ZIP 文件的功能并不难。因为官方已经为我们提供了 解压本地文件、解压远程文件和生成 ZIP 文件 的完整示例。好的，废话不多说，下面我们来一步步实现在线解压 ZIP 文件的功能。
首先下载jszip和jszip-utils两个js文件，在页面中引入，这就不用多说了，然后封装解压的方法
<--
blob是下载的blob类型文件，一定要确定这个类型。
num是压缩文件内的文件个数
isTrue就是是否需要二次解压
-->
function useZip(blob,num,isTrue){
//因为压缩文件内一般有多个页文件，所以需要遍历有几个文件，获取文件名，分别解压缩
for(let i=0; i<num; i++){
JSZip.loadAsync(blob).then((zip)=>{
var nameArr = [];
for(var key in zip.files){
nameArr.push(key)
}
if(isTrue == true){
//每个文件名都解压缩，返回blob类型二次解压
return zip.file(nameArr[i].async('blob'));
}else{
return zip.file(nameArr[i].async('string'));
}
}).then((response)=>{
if(isTrue == true) {
let blob1 = new Blob([response],{type:'text/plain'});
JSZip.loadAsync(blob1).then((zip)=>{
return zip.file(Object.keys(zip.files)[0]).async('string');
}).then((response)=>{
console,log(response)
})
}else{
console.log(response);
}
})
}
}
补充一下，blob类型的文件，如果相当做src作为图片展示，那么做如下操作
let src = URL.createObjectURL(blob);
let img = document.createElement('img')
img.src = src
document.body.appendChild(img)
