第一步下载包

npm i jszip save-as-file -S

第二步引入包

import JSZip from "jszip";
import saveFile from "save-as-file";

第三步使用

const zip = new JSZip();
const cache = {};
const promises = [];
batchDownLoadZip(["http://xxx.jpg","http://xxx.png",],"压缩文件名称"
);
function batchDownLoadZip(fileList, zipName) {return new Promise((resolve, reject) => {fileList.forEach((item, index) => {// item.fileUrl.split('?')[0] 处理fileList里的url地址 去除？号和后面的字符串const promise = getImgArrayBuffer(item.split("?")[0]).then((data) => {// 下载文件, 并存成ArrayBuffer对象// item.fileName fileList里的文件名zip.file(index + ".png", data, { binary: true }); // 逐个添加文件cache[item.fileName] = data; // 可要可不要 用来打印查检查添加了那些文件}).catch((e) => {console.log("文件访问失败");});promises.push(promise); // 加到promises队列里});Promise.all(promises).then(() => {// 异步队列全部完成时 执行下面代码console.log("开始压缩");zip.generateAsync({ type: "blob" }).then((content) => {// 生成二进制流console.log("压缩成功", content);saveFile(content, zipName);console.log("文件保存成功");resolve();}).catch((e) => {console.log("下载失败");reject(e);});}).catch((e) => {console.log("压缩失败");reject(e);});});
}
function getImgArrayBuffer(href) {return new Promise((resolve, reject) => {// 通过请求获取文件blob格式const xmlhttp = new XMLHttpRequest();xmlhttp.open("GET", href, true);xmlhttp.responseType = "blob";xmlhttp.onload = function() {if (this.status === 200) {resolve(this.response);} else {reject(this.status);}};xmlhttp.send();});
}