需要安装cnpm install jszip,cnpm install file-saver

<button class="" @click="downLoad">下载</button>

import JSZip from "jszip"
import { saveAs } from 'file-saver';

// 或者如果你使用ES模块导入方式
import * as JSZip from 'jszip';
import { saveAs } from 'file-saver/FileSaver';

//点击下载
//选中的图片（需要下载的图）
const checkedCities = ref(
  [{
    url: 'https://img2.baidu.com/it/u=2193484399,645213060&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=494',
    id: 12,
    name: '1'
  },
  {
   url: 'https://img2.baidu.com/it/u=2956591221,3570542538&fm=253&fmt=auto&app=138&f=JPEG?w=664&h=311',
    id: 34,
    name: '2'
  },
  ]
)

const downLoad = () => {
//图片只有一个的话 单图下载不压缩打包
  if (checkedCities.value.length == 1) {
    const imageUrl = checkedCities.value[0].url;
    const xhr = new XMLHttpRequest();
    xhr.open("GET", imageUrl, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (xhr.status === 200) {
        const url = window.URL.createObjectURL(xhr.response);
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "image.png");
        document.body.appendChild(link);
        link.click();
      } else {
        console.error("图片下载失败");
      }
    };
    xhr.send();

  } else {
    const imageUrls = []; // 替换为实际的图片URL数组
    const filenames = []; // 对应的文件名数组
    checkedCities.value.forEach(ii => {
      imageUrls.push(ii.url)
      filenames.push((ii.name || ii.id) + '.png')
    })
    createAndDownloadImageZip(imageUrls, filenames);

  }
}
//方法1 2 选一个 
async function createAndDownloadImageZip(images, filenames) {
//方法1
  const zip = new JSZip();
  for (let i = 0; i < images.length; i++) {
    // 获取图片资源
    fetch(images[i])
      .then(response => response.blob())
      .then(blob => {
        // 将Blob添加到ZIP包中，这里假设图片名为'image'+i+'.jpg'
   
zip.file(`img${i}.jpg`, blob);
        // 在所有图片都处理完之后生成ZIP
        if (i === images.length - 1) {
          zip.generateAsync({ type: 'blob' }).then(content => {
            // 下载ZIP文件
            saveAs(content, 'downloaded_images.zip');
          });
        }
      });
  }
方法2
  const zip = new JSZip();

  // 遍历图片数据
  for (let i = 0; i < images.length; i++) {
    const imageUrl = images[i];
    const filename = filenames[i];

    // 如果是URL，可能需要异步加载图片并转化为Blob对象
    if (typeof imageUrl === 'string') {
      const response = await fetch(imageUrl);
      const blob = await response.blob();
      zip.file(filename, blob);
    }
    // 如果已经是Base64格式，则可以直接转换
    else if (typeof imageUrl === 'object' && imageUrl instanceof Blob) {
      zip.file(filename, imageUrl);
    }
    // 如果是Base64字符串
    else if (typeof imageUrl === 'string' && /^data:image/.test(imageUrl)) {
      // 将Base64转为Blob
      const base64Data = imageUrl.split(',')[1];
      const blob = b64toBlob(base64Data, 'image/jpeg'); // 这里假设是JPEG格式，实际要根据Base64数据判断
      zip.file(filename, blob);
    }
  }
  // 生成并下载ZIP文件
  const content = await zip.generateAsync({ type: 'blob' });
  saveAs(content, 'images.zip');
}

// Base64转Blob的辅助函数
function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
}