Vue introduces jszip to download multiple pictures and compress the download

Vue introduces jszip to download multiple pictures and compress the download

jszip official website address

First download jszip

npm install jszip

Then don't talk nonsense and go directly to the code

<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>

after download effect