关于JSZIP压缩图片打包下载的简单用法

官网地址

https://stuk.github.io/jszip/documentation/api_jszip.html

因为我在项目中使用到了这个JSZIP包，方法，所以特此记录一下它的简单使用方式，官网api会有更详细的介绍。

首先我的需求是将解析压缩后的图片再次压缩导出在一个文件中，按照要求分类，并且相同地址信息的图片放在同一个文件夹下。保存用到了file-saver里的FileSaver方法。

导出效果如下：

首先安装jszip这个包

yarn add jszip
//或者
npm install jszip

安装file-saver，这里就统一用yarn命令了

yarn add file-saver

 在项目中引入

import JSZip from &＃39;jszip&＃39;
import FileSaver from &＃39;file-saver&＃39;

 先实例化一个压缩文件对象

let zip = new JSZip(); //实例化一个压缩文件对象let myNotesName = &＃39;导出结果&＃39;;let imgFolder = newExportTitle.map((e) => {return zip.folder(e); //新建一个图片文件夹用来存放图片，参数为文件名})// newExportTitle 这个是要导出的所有文件夹名存放的数组

imgFolder是zip新建的文件夹数组

然后开始循环判断

for (let i = 0; i { if (imgSrcList[i].classInfo === element.root.replace(&＃39;/&＃39;, "")) {element.file(imageNames, image, { base64: false })}});//遍历判断解析图片后中classinfo字段 和 imgFolder数组中图片文件夹的名字一样，就用//file方法存入}

然后开始压缩导出

zip.generateAsync({type: "blob",//压缩类型compression: "DEFLATE", // STORE：默认不压缩 DEFLATE：需要压缩compressionOptions: {level: 1 // 压缩等级1~9 1压缩速度最快，9最优压缩方式 // [使用一张图片测试之后1和9压缩的力度不大，相差100字节左右]},}).then(function (content) {message.success({ content: "压缩包导出成功", key: &＃39;export&＃39;, duration: 3 })FileSaver.saveAs(content, `${myNotesName}.zip`);});

等待压缩导出即可，压缩的时间和图片的大小有关，图片越大压缩时间越久，比较耗时。