vue引入jszip下载多个图片并压缩下载

jszip官网地址

先进行jszip下载

npm install jszip

然后废话不多说直接上代码

<template><div><button @click="downloadImages">下载图片</button></div>
</template><script>
import JSZip from 'jszip';export default {name: 'ImageDownload',data() {return {images: ['1.png', '2.png', '3.png', '4.png'], //模拟图片数组};},methods: {async downloadImages() {const zip = new JSZip();// 循环处理每个图像并添加到zip文件中for (let i = 0; i < this.images.length; i++) {const response = await fetch(this.images[i]);const arrayBuffer = await response.arrayBuffer();zip.file(`image${i + 1}.png`, arrayBuffer);}// 生成zip文件并下载const content = await zip.generateAsync({ type: 'blob' });const link = document.createElement('a');link.href = URL.createObjectURL(content);link.download = 'images.zip';link.click();},},
};
</script>

下载后效果