jszip+file-saver实现前端下载zip包（避免图片跨域问题）

昨天刚踩过的坑，查阅资料后整体出来的，直接粘贴复用

安装两个包

npm i jszip --save
复制代码

npm i file-saver --save
复制代码

const getFile = (url: string) => {
  return new Promise((resolve, reject) => {
    resolve(loadAsArrayBuffer(url));
  });
};

export function loadAsArrayBuffer(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "arraybuffer";
    xhr.onerror = function () {
      /* handle errors*/
    };
    xhr.onload = function () {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject({});
      }
    };
    try {
      xhr.send();
    } catch (error) {
      console.log(error);
    }
  });
}

const download = (data: any[], fileName?: string) => {
    setloading(true);
    const zip = new JSZip();
    const promises = data.map((item: any) => {
      return getFile(item.fileUrl).then((res: any) => {
        const fileName = item.fileName;
        zip.file(fileName, res, { binary: true });
      });
    });
    Promise.all(promises).then(() => {
      zip
        .generateAsync({
          type: "blob",
          compression: "DEFLATE",
          compressionOptions: {
            level: 9,
          },
        })
        .then((res: any) => {
          FileSaver.saveAs(res, fileName ? fileName : "压缩包.zip");
        })
        .then(() => {
          setloading(false);
        })
        .catch(() => {
          setloading(false);
        });
    });
  };
复制代码

用法

const datas = [
{
    fileName:'xxx',
    fileUrl:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg'
},
{
    fileName:'xxx',
    fileUrl:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg'
},
{
    fileName:'xxx',
    fileUrl:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg'
}
,{
    fileName:'xxx',
    fileUrl:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg'
}
,{
    fileName:'xxx',
    fileUrl:'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg'
}
];

datas?.length>0&&download(datas)
复制代码