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

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>

下载后效果