js 前端下载文件并压缩保存到本地

第一步下载包

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();
  });
}