批量导出图片,生成压缩包

93 阅读1分钟

1.先导入必要的资源包

import axios from ‘axios’
import FileSaver from ‘file-saver’
import JSZip from ‘jszip’

2.这是把url转换成blob的函数

    getFile(url) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'get',
        url,
        responseType: 'blob',
      })
        .then((response) => {
          resolve(response.data)
        })
        .catch((error) => {
          reject(error.toString())
        })
    })
  }

3.这是执行函数 imgList里面是你的 url地址数组 例如[upsports.cn:1443/file/165839…]

{
const zip = new JSZip();
    const promises = [];
    for (const url of imgList) {
      const promise = this.getFile(url).then((data) => {
        zip.file(new Date().getTime() + ".png", data, { binary: true }); 
      });
      promises.push(promise);
    }
    Promise.all(promises).then(() => {
      zip
        .generateAsync({ type: "blob" })
        .then((content) => {
          FileSaver.saveAs(content, new Date().getTime() + "准考证下载");
          this.$message.success("图片下载完成");
        })
        .catch((res) => {
          this.$message.warning("文件下载失败!");
        });
    });
}