vue2 jszip + file-saver下载图片zip

今天做项目的时候一个功能是需要批量下载图片到本地在网上查了一些资料不是很全所以记录一下

首先npm安装引入jszip

npm install jszip file-saver --save

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

然后上方法

// 下载图片zip
    async downloadImages() {
      try {
        // 创建一个新的JSZip实例
        const zip = new JSZip();
        const imageUrls = this.urls1; 
        //this.urls1: 这是图片的数组，如果是本地图片的话需要require()方法包裹一下

        // 用于追踪已处理的图片数量
        let processedImages = 0;

        const fetchImages = async () => {
          if (processedImages < imageUrls.length) {
            const url = imageUrls[processedImages];
            const response = await fetch(url);
            const blob = await response.blob();

            // 将图片添加到JSZip实例中
            zip.file(`image${processedImages + 1}.${url.split('.').pop()}`, blob, { binary: true });

            processedImages++;

            // 递归调用以处理下一张图片
            fetchImages();
          } else {
            // 所有图片都已处理，生成ZIP文件
            zip.generateAsync({ type: 'blob' })
              .then(zipBlob => {
                // 使用FileSaver的saveAs方法下载ZIP文件
                saveAs(zipBlob, 'images.zip'); // images.zip 为下载的压缩包名
              })
              .catch(error => {
                console.error('Error generating ZIP blob:', error);
              });
          }
        };

        // 开始处理图片URL数组
        fetchImages();
      } catch (error) {
        console.error('Error downloading images:', error);
      }
    },

记录完毕