vue2 jszip + file-saver下载图片zip-优快云博客

本文链接：https://blog.youkuaiyun.com/wsdf222/article/details/136565998

本文介绍了如何在JavaScript项目中使用npm安装的jszip和file-saver库，实现从远程或本地URL批量下载图片并将其打包成ZIP文件的过程，包括异步处理和错误捕获。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

首先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);
      }
    },

记录完毕