yarn add jszip
yarn add file-saver

<template><div class="home"><button @click="attachDownload">批量下载</button><div class="home_wrap"><div class="home_wrap_item" v-for="item in imageList" :key="item.url"><input v-model="item.is_checkbox" type="checkbox" id="c1" name="cc" /><label for="c1"><span></span></label><img :src="item.url" alt="" /></div></div></div>
</template><script>
import JSZip from "jszip";
import FileSaver from "file-saver";
export default {data() {return {imageList: [{url: "https:\/\/pic.rmb.bdstatic.com\/bjh\/7ab6977e3304d6bd72704cc434fe52d3.jpeg",id: "111",is_checkbox:false,},{url: "https:\/\/fc.sinaimg.cn\/large\/419f07d1gy1hg5xdr2f1aj21kw2cmx6s.jpg",id: "222",is_checkbox:false,},{url: "https:\/\/img10.360buyimg.com\/ddimg\/jfs\/t1\/132974\/31\/29586\/3214914\/633016ccEb4f7672a\/b05ac0be612c7519.jpg",id: "333",is_checkbox:false,},{url: "https:\/\/pic.rmb.bdstatic.com\/bjh\/4363032f4ed4400e3b608584fa2664a7.jpeg",id: "444",is_checkbox:false,},],};},methods: {async attachDownload() {const arr = this.imageList.filter(ele=>ele.is_checkbox==true)const zip = new JSZip();const cache = {};const downloadPromises = arr.map(async (item) => {try {if (item.url) {const data = await this.getImgArrayBuffer(item.url);zip.file(item.id + ".png", data, { binary: true });cache[item.id] = data;} else {throw new Error(`图片${item.fileName}地址错误，下载失败`);}} catch (error) {console.error("文件获取失败", error);}});try {await Promise.all(downloadPromises);const content = await zip.generateAsync({ type: "blob" });FileSaver.saveAs(content, "病例编辑图片");} catch (error) {console.error("文件压缩失败", error);}},async getImgArrayBuffer(url) {const response = await fetch(url);if (!response.ok) {throw new Error(`请求失败: ${response.status}`);}return await response.blob();},},
};
</script>
<style lang="scss">
.home {width: 100vw;height: 100vh;&_wrap {display: flex;flex-wrap: wrap;&_item {width: 200px;height: 200px;img {width: 100%;height: 100%;}}}
}
</style>