前端获取图片列表打包下载

导入依赖

import JSZip from "jszip";
import FileSaver from "file-saver";

注意问题

1.图片跨域问题，因为图片是oss上需要设置跨域规则才能访问到图片全路径地址。

封装js

export function downloadAll() {
  // 这里随便定义的数据
  const sourceList = [
    {
      id: 1,
      qrCode:
        "https://hzhoss.oss-cn-hangzhou.aliyuncs.com/2022/02/26/homeLogo.png",
      picName: "图片1",
    },
  ];
  const zipName = "资料下载"
  // 执行打包下载 参数一下载的批量图片信息, 参数二打包后的压缩包名称自己定义
  downloadZip(sourceList, zipName);
}

图片处理

  // 转换图片为base64格式
function getImageBase64(image) {
    // 创建一个画布
    const canvas = document.createElement("canvas");
    // 让画布的宽高等于图片的宽高
    canvas.width = image.width;
    canvas.height = image.height;
    // 然后在画布上进行画画
    const ctx = canvas.getContext("2d");
    // 开始画图片，1.绘制的对象2.绘制的位置，3绘制的宽高
    ctx.drawImage(image, 0, 0, image.width, image.height);
    return canvas.toDataURL();
}

压缩

async function downloadZip(sourceList, zipName) {
    const zip = new JSZip(); // 创建一个压缩对象
    const fileFolder = zip.folder(zipName); // 创建 zipName 文件夹
    const fileList = [];
    // 遍历图片数据
    for (let i = 0; i < sourceList.length; i++) {
      // 压缩后的每张图片对应名
      const name = sourceList[i].picName; // 注意: 每张图片的名称--需要对数据属性进行转换
      // 创建图片对象 设置图片基本信息
      const image = new Image();
      image.setAttribute("crossOrigin", "Anonymous"); // 设置 crossOrigin 属性，解决图片跨域报错
      // 设置图片地址----稍后进行base64转换
      image.src = sourceList[i].qrCode;
      // 图片下载
      image.onload = async () => {
        // 路径base64转换
        const url = await getImageBase64(image);
        // 往压缩包里添加图片数据
        fileList.push({
          name: name, // 压缩名
          img: url.substring(22), // 去掉base64文件标识，img是文件形式
        });
        // 确保每个数据都遍历完
        if (fileList.length === sourceList.length) {
          // 确保数据不为空
          if (fileList.length) {
            for (let k = 0; k < fileList.length; k++) {
              // 往文件夹中，添加每张图片数据fileFolder文件夹压缩包
              fileFolder.file(fileList[k].name + ".png", fileList[k].img, {
                base64: true,
                // 下面的可以省略
                compression: "DEFLATE", // STORE：默认不压缩 DEFLATE：需要压缩
                compressionOptions: {
                  level: 9, // 压缩等级1~9    1压缩速度最快，9最优压缩方式
                  // [使用一张图片测试之后1和9压缩的力度不大，相差100字节左右]
                  // 注意到达这里的时候image的路径必须是带有data：image/png;base64,
                },
              });
            }
            zip
              .generateAsync({
                // 压缩的结果为blob类型（二进制流）,可用作文件上传
                type: "blob",
              })
              .then((content) => {
                // 直接在浏览器打成zipName.zip包并下载，saveAs依赖的js是FileSaver.js
                FileSaver.saveAs(content, zipName + ".zip");
              }).catch(msg => {
                console.log(msg)
              });
          }
        }
      };
    }
}

所有代码放在一个js

导入调用，传参的地方自己修改下

import {downloadAll} from "@/api/utils/down"

// 点击下载
    downImg() {
      if (this.studentImageList.length > 0) {
        console.log("开始下载")
        // const imageList = ["https://hzhoss.oss-cn-hangzhou.aliyuncs.com/2022/02/26/homeLogo.png"]
          downloadAll()
      }
    },