一文彻底弄懂jszip中的压缩与解压

一、一文彻底弄懂jszip中的压缩与解压

在开发离线包需求时，将SPA打包为zip文件上传至CDN，用户下载后解压使用。此过程采用jszip库，其支持多种资源类型和promise风格API，简化开发。jszip库的使用主要涉及压缩与解压资源。压缩时，先打包dist目录下的文件，完成两步操作。解压则需从CDN拉取zip文件，执行两步解压过程。处理zip包时，建议全程使用buffer，避免字符串转换导致的乱码问题，buffer体积小，便于存储与jszip无缝处理。注意上传CDN时直接使用buffer，避免将zip文件转为字符串上传，导致解压失败。fs.readFileSync()函数需正确使用，加上参数时返回字符串，直接读取zip文件为字符串会导致乱码。实际开发中，需注意在不同场景下jszip库的正确使用，特别是buffer的使用问题，避免不必要的字符串读写操作。同步API在node环境中使用时也需小心。总结此需求，旨在为有类似需求的同行提供参考，记录开发过程中的经验和教训。

二、jszip压缩文件夹

相信大家对 ZIP文件都不会陌生，当你要打开本地的 ZIP文件时，你就需要先安装支持解压 ZIP文件的解压软件。但如果预解压的 ZIP文件在服务器上，我们应该如何处理呢？最简单的一种方案就是把文件下载到本地，然后使用支持 ZIP格式的解压软件进行解压。那么能不能在线解压 ZIP文件呢？答案是可以的，接下来阿宝哥将介绍浏览器解压和服务器解压两种在线解压 ZIP文件的方案。

在介绍在线解压 ZIP文件的两种方案前，我们先来简单了解一下 ZIP文件格式。

ZIP文件格式是一种数据压缩和文档储存的文件格式，原名 Deflate，发明者为菲尔·卡茨（Phil Katz），他于 1989年 1月公布了该格式的资料。ZIP通常使用后缀名“.zip”，它的 MIME格式为“application/zip”。目前，ZIP格式属于几种主流的压缩格式之一，其竞争者包括RAR格式以及开放源码的 7z格式。

ZIP是一种相当简单的分别压缩每个文件的存档格式，分别压缩文件允许不必读取另外的数据而检索独立的文件。理论上，这种格式允许对不同的文件使用不同的算法。然而，在实际上，ZIP大多数都是在使用卡茨（Katz）的 DEFLATE算法。

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

关注「全栈修仙之路」阅读阿宝哥原创的 4本免费电子书（累计下载 3万）及 11篇 Vue 3进阶系列教程。

JSZip这是一个用于创建、读取和编辑.zip文件的 JavaScript库，该库支持大多数浏览器，具体的兼容性如下图所示：

其实有了 JSZip这个库的帮助，要实现浏览器端在线解压 ZIP文件的功能并不难。因为官方已经为我们提供了

解压本地文件、解压远程文件和生成 ZIP文件

的完整示例。好的，废话不多说，下面我们来一步步实现在线解压 ZIP文件的功能。

浏览器端在线解压 ZIP文件的功能，可以拆分为

下载 ZIP文件、解析 ZIP文件和展示 ZIP文件

3个小功能。考虑到功能复用性，阿宝哥把下载 ZIP文件和解析 ZIP文件的逻辑封装在 ExeJSZip类中：

class ExeJSZip else},});});}//遍历Zip文件 async iterateZipFile(data, iterationFn) let zip; try catch(error)}}

利用 ExeJSZip类的实例，我们就可以很容易实现在线解压 ZIP文件的功能：

p label请输入ZIP文件的线上地址：/label input type="text" id="zipUrl"//pbutton id="unzipBtn" onclick="unzipOnline()"在线解压/buttonp id="status"/pul id="fileList"/ul

const zipUrlEle= document.querySelector("#zipUrl");const statusEle= document.querySelector("#status");const fileList= document.querySelector("#fileList");const exeJSZip= new ExeJSZip();//执行在线解压操作async function unzipOnline()); statusEle.innerText="ZIP文件解压成功"; fileList.innerHTML= items;}//处理下载进度function handleProgress(progressData)= progressData; if(loaded=== total)

好了，在浏览器端如何通过 JSZip这个库来实现在线解压 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)= else); const entries= await zip.entries(); filteredEntries= Object.values(entries).map((entry)=;}); await zip.close(); UnzipCaches.set(fileName, filteredEntries);} ctx.body=;} catch(error);}});

在以上代码中，我们通过 ZIP_HOME和 fileName获得文件的最终路径，然后使用 StreamZip对象来执行解压操作。为了避免重复执行解压操作，阿宝哥定义了一个 UnzipCaches缓存对象，用来保存已解压的文件信息。定义好上述路由，下面我们来验证一下对应的功能。

p label请输入ZIP文件名：/label input type="text" id="fileName" value="kl_161828427993677"//pbutton id="unzipBtn" onclick="unzipOnline()"在线解压/buttonp id="status"/pul id="fileList"/ul

const fileList= document.querySelector("#fileList");const fileNameEle= document.querySelector("#fileName");const request= axios.create(/li`;}); fileList.innerHTML= items;}}

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

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

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

router.get("/unzip/:name/entry", async(ctx)=); const entryData= await zip.entryData(entryPath); await zip.close(); ctx.body=;} catch(error);}});

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

function toArrayBuffer(buf) return ab;}

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

async function previewZipFile(path)= response.data; const entryBuffer= toArrayBuffer(entryData.data); const blob= new Blob(

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

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

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

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

三、哪种压缩格式最好

问题一：压缩文件方式选择哪种,占空间最小?压缩方式的“储存”是不做压缩，“最快、较快、标准、较好、最好”是逐渐级提高压缩率所以最好压缩率最高，占空间最小

问题二：哪种压缩格式好？例如ZIP、TAR、TAR.GZ等等 zip兼容性最好。国外的朋友几乎不用rar。

rar独有格式也很好，带恢复，分卷稳定。速度和压缩比都尚可。

7z是比较常见的高压缩率速度也平衡的格式。

tar.gz在linux系统下用得多，但是在windows下普及率不高。

不同软件压缩、解压的速度也会因为优化而不同，综合来说7z是最常用最好用的格式。

但是，任何一种压缩算法都有其优势与劣势，没有绝对的好和差。

问题三：压缩文件哪种格式最好最常见的有r搐r与zip，个人认为用rar较好，另外还有一种是7z，它是目前压缩得最厉害的格式，但使用的人不多.最好用rar

问题四：常见的压缩文件格式有哪些?各有什么优点我从网上拷的==

常见压缩文件格式及压缩软件默认分类 2010-03-05 19:18:33阅读42评论0字号：大中小

主题：常见压缩文件格式及压缩软件

文件压缩，原本是在那个存储空间甚至需要以字节来计算的时代，为了节省文件所占用的空间而诞生的。而随着网络的普及，为了节省文件在网络上传输的流量及时间，对文件进行压缩也几乎成为了必备的过程。

根据所使用的压缩算法的不同，压缩文件也被区分为不同的格式。图片中的列表是大多数常见的压缩文件格式，不过常用的并没有那么多，而?在Windows系统上面常用的就更少了。下面，我就来为大家简单的介绍一下Windows系统中经常会用到的几种压缩文件格式，以及常用的压缩和解压缩软件。

ZIP应该算是最常见的压缩文件格式了，你甚至不需要单独为它安装一个压缩或者解压缩软件，因为我们使用的Windows系统以及集成了对ZIP压缩格式的支持。

经历过DOS时代的朋友可能还记得ARJ格式，它基本就是DOS时代ZIP，直到ZIP的出现，以更高的压缩效率取代了ARJ，成为了大家的首选。现在的大多数操作系统都会集成对ZIP文件的支持，而所有的压缩软件也都会提供对ZIP文件的支持，这些足以体现出ZIP格式的地位。

ZIP时代最出名的压缩软件就要数WinZIP了，它几乎是当时每台电脑都必备的软件。直到Windows系统开始集成了对ZIP文件的支持，以及后起新秀RAR格式的出现，使得WinZIP不再是那么的必要，才让它逐渐退出了大家的视线。

虽然ZIP在压缩文件格式中地位很高，但现在相当多的下载网站都选择了用RAR格式来压缩他们的文件，最根本的原因就在于RAR格式的文件压缩率比ZIP更高。

同样的文件使用RAR格式进行压缩后得到的大小通常都会比使用ZIP压缩后更小，而我们对文件进行压缩的主要目的就是要减小文件大小以便于网络传输，正巧RAR格式又出现在网络刚刚开始普及的时候，所以RAR逐渐取代ZIP的地位也就是情理之中的事了。

对RAR文件进行压缩或者解压缩，首选的软件当然是WinRAR，与之前的WinZIP一样，它几乎也是现在每台电脑都必装的软件。不过需要提醒大家的是，作为商业软件，WinRAR只允许用户进行30天的免费试用，虽然过期后软件仍然能够正常工作，但就已经不再合法了。

作为压缩格式的后起新秀，7Z有着比RAR更高的压缩率，能够将文件压缩的更加小巧。不过因为RAR格式已经高度普及，又没有网络普及的“天时”相助，7Z想要取代RAR现在的地位还是相当不容易的。

与之前两种格式一样，7Z也有着专门支持它的软件：7-zip。使用7-zip可以解压缩RAR格式的压缩文件，而WinRAR也同样可以解压缩7Z格式的压缩文件。

大概因为直接使用现有的WinRAR就可以处理网络上下载到的7Z格式文件，而要将文件压缩成7Z格式的话却需要额外安装7-zip，所以也间接的妨碍了7Z格式的普及吧。WinZIP当年就是因为没有及时的提供对RAR格式的支持而被WinRAR钻了空子。

CAB是微软的一种安装文件压缩格式，主要应用于软件的安装程序中。因为涉及到安装程序，所以CAB文件中包含的文件通常都不是简单的直接压缩，而是对文件名等都进行了处理，所以虽然可以对其直接解压缩，但解压后得到的文件通常都无法直接使用。

和ZIP一样，Windows系统自身就可以打开CAB......>>

问题五：无损压缩有哪几种格式？所谓无损压缩格式，是利用数据常统计冗余进行压缩，可完全回复原始数据而不引起任何失真，但压缩率是受到数据统计冗余度的理论限制，一般为2:1到5:1.这类方法广泛用于文本数据，程序和特殊应用场合的图像数据(如指纹图像，医学图像等)的压缩。由于压缩比的限制，仅使用无损压缩方法是不可能解决图像和数字视频的存储和传输的所有问题.经常使用的无损压缩方法有 Shannon-Fano编码，Huffman编码，游程(Run-length)编码，LZW(Lempel-Ziv-Welch)编码和算术编码等。

所谓无损压缩格式，顾名思义，就是毫无损失地将声音信号进行压缩的音频格式。常见的像MP3、WMA等格式都是有损压缩格式，相比于作为源的WAV文件，它们都有相当大程度的信号丢失，这也是它们能达到10％的压缩率的根本原因。而无损压缩格式，就好比用Zip或RAR这样的压缩软件去压缩音频信号，得到的压缩格式还原成WAV文件，和作为源的WAV文件是一模一样的！但是如果用Zip或RAR来压缩WAV文件的话，必须将压缩包解压后才能播放。而无损压缩格式则能直接通过播放软件实现实时播放，使用起来和MP3等有损格式一模一样。总而言之，无损压缩格式就是能在不牺牲任何音频信号的前提下，减少WAV文件体积的格式。

问题六：图片中的格式哪种是最好的？ BMP：Windows系统下的标准位图格式，未经过压缩，这种图像文件比穿大。平时我们用画图程序画出的图形的格式就是这一种。

JPEG（JPG）：应用最广泛的图片格式之一，这种图片是经过压缩而来的，文件较小，便于在网络上传输，网页上大部分图片就是这种格式。

GIF：分为静态GIF和动画GIF两种，“体型”娇小，网上很多小动画都是GIF格式。GIF其实是将多幅图像保存为一个图像文件，从而形成的动画。

PSD：图像处理软件Photoshop的专用图像格式，图像文件较大。

PCX：ZSOFT公司在开发图像处理软件Paintbrush时开发的一种格式。它是经过压缩的格式，占用磁盘空间较少，并具有压缩及全彩色的优点。

PNG：与JPG格式类似，网页中很多图片都是这种格式，支持图像透明。

问题七：压缩文件类型哪个好 7z好压缩率最高一、目录表（TOC）与分卷（Volume）

抛开压缩算法不谈，我认为zip、rar在文件格式上最大的差异就在目录表（Table of Contents，TOC）：zip有TOC，而rar没有。

TOC这个词其实是从出版界借用过来的，指的就是每一本书正文前面的“目录”，它的作用地球人都知道：如果想快速找到书中某一内容，可以先查TOC，然后按照TOC指明的页码直接翻即可。

在纸质书里TOC是印刷出来的一张表，而在电子文件里则是由结构化数据构成的一张表，它的目的同样是为了快速定位：如果想找文件中的某一内容，可以先查TOC，知道感兴趣的内容在文件的什么位置，直接跳过去就行了。最常见的运用就是avi、rm等多媒体文件：播放的时候经常有人在播放条上点来点去跳着看（即“随机访问”），如果没有TOC，在长达几百兆的文件里来回定位会慢死。

具体到zip文件里，TOC是放在文件尾部的一张表，里面列出了zip包中每一个文件的属性（文件名、长度等）和在zip包中的存放位置。如果需要随机访问zip包中的某一个文件，只需在TOC里找到这个文件的存放位置，直接跳过去即可。

而RAR文件里则没有TOC，在文件头之后所有文件按顺序连续存放。

这种差异造成的结果就是：随机访问时zip比rar快，而顺序访问时rar比zip快。

所谓随机访问，就是前面说过的随机访问压缩包中某个指定的文件。举一个简单的例子：一本反编译或下载到的网页电子书，有大量HTML、图像、css、js，然后打成压缩包。现在要求在不解包的情况下访问其中的页面：可以想象，打开每个HTML页面的时候，它所附带的图像、css、js等文件可能随机分布在整个压缩包里，如果没有TOC，查找每个文件的时候都要从头开始找，将会有多慢。所以各位可以理解为什么jar包就是标准zip包，而我也只用zip格式保存反编译出来的电子书、漫画、PDG书等一切可能需要随机访问的东西。

所谓顺序访问，就是将整个压缩包从头解到尾。在这方面RAR具有天然的优势。而且为了节省WinRAR列文件的时间，对于单个RAR我一般都直接通过右键菜单解压缩，很少双击压缩包打开再解压。

由于rar的原作者已经去世，造成这种差异的确切原因我相信已不可考，但我个人猜测可能与DOS时代的备份软件之争有关：在DOS时代，电脑硬盘不像现在这样奢侈，20MB就算很大了。这样的容量用两盒软盘即可备份，备份成本相对数据本身的价值来说非常低廉。因此在DOS时代，很多公司和机构都制定有定期硬盘备份政策，以免因为人为或非人为的因素（早期硬盘可没有如今可靠）而造成不可挽回的数据损失。在备份软件方面，虽然微软已经随DOS提供了BackupRestore工具，但是他们基本不具备数据压缩能力，因此在压缩软件中提供备份功能，就成为DOS时代的一个时尚。由于DOS时代的备份介质多为软盘，因此压缩软件的备份功能其实就转化成如今很常见的一个功能：分卷压缩功能，即按照软盘容量进行分卷压缩，然后将分卷压缩文件备份（Backup）到软盘，需要的时候再解压，或恢复（Restore）到硬盘。

DOS时代最有名的zip工具是pkzip，出现得比DOS版的RAR早。在分卷压缩时，pkzip按照zip文件规范，将TOC存放在最后，即存储在最后一卷，由此带来如下问题：

1、恢复时，每解压一张盘，都要先将最后一张盘***去一次，读一次TOC。

2、只要最后一张盘上的TOC坏了，就算其它盘都是好的，也不能正常解压。

这两个缺点，尤其是第一个缺......>>

问题八：哪种图片压缩格式最好？这位朋友，mp3确实本身就是一种压缩文件，它是一种有损压缩格式，也就是说通过牺牲了一部分音乐质量来换取小巧的体积，同样的还有wma等格式如果您确实嫌一些高码率的mp3（如320kbps等）文件过大，而对音乐的质量要求不是非常的高，可以使用软件将其压缩为48～64kbps左右的wma，这样可以减少体积，而且音质不会损失太大，可以满足一般人的欣赏要求，即使mp3随身听绝大多数也都支持wma格式

当然进行转换，可以简单的使用千千静听播放器进行，将文件添加到播放列表，选中后（在列表窗口中）单击右键选择“转换格式…”，然后选择编码器，比如wma的或者mp3的，然后配置一下，选择合适的码率（即kbps），就可以进行压缩编码了

问题九：哪种压缩格式最小?用什么软件压缩? WinRAR简体中文版 3.60 beta 7特别版

7-Zip v5.0 SP1简体中文版『号称有着现今最高压缩比的压缩软件』

7-Zip是一款号称有着现今最高压缩比的压缩软件，它不仅支持独有的7z文件格式，而且还支持各种其它压缩文件格式，其中包括ZIP, RAR, CAB, GZIP, BZIP2和TAR。此软件压缩的压缩比要比普通ZIP文件高30-50%。因此，它可以把经WinZip压缩的文件再压缩2-10%。

此5.0版本更加拥有强大的〈安装程序制作功能〉。经过全新编程。语言及界面更加友好!下载页面有详细介绍!并且此软件内已附带一款精美的《一键通档案》。它可以说明一切问题!

UHARC GUI v3.06绿色修正汉化版『世界上压缩比最高的软件』

称得上是世界上压缩比最高的软件。我压Longhorn4008+Longhorn4015(差不多1.15G),压缩后大小为698Mb！几乎减掉了一半，文件越大压缩比越高

UHARC GUI称得上是世界上压缩比最高的软件，他的超强压缩比可以让RAR,7Z汗颜，支持创建自解压缩包。

此汉化版完全汉化了 UHARC GUI还汉化 UHARC_04 UHARC_06 NSIS的提示信息，现在创建的自解压缩包为中文。

问题十：压缩文件的格式有哪几种，一般手机支持哪几种呢？压缩文件有很多种，常见的有rar、zip等。普通手机不支持压缩文件。目前好多智能手机上有zip管理器，同时支持rar和zip。注意jar的文件虽然是压缩包，但它是java应用程序的一种格式，与实际意义上的压缩文件不一样