下载图片到本地，多个图片压缩后下载到本地

单个图片的下载：
第一种

async downLoadImage() {
   
    let response = await fetch('https://img-home.csdnimg.cn/images/20231127111739.png');
    let data = await response.blob();
    let url = window.URL.createObjectURL(data);
    let link = document.createElement('a');
    link.href = url;
    link.download = 'image.jpg';
    link.click();
}

第二种，支持旧浏览器

downloadImage() {
   
  const imageUrl = 'https://img-home.csdnimg.cn/images/20231127111739.png';
  const xhr = new XMLHttpRequest();
  xhr.open("GET", imageUrl, true);
  xhr.responseType = "blob";
  xhr.onload = function () {
   
    if (xhr.status === 200) {
   
      const url = window.URL.createObjectURL(xhr.response);
      const link = document.createElement("a");
      link.href = url;
      link.download = "image22222.png";
      link.click();
    } else {
   
      console.error("图片下载失败");
    }
  };
  xhr.send();
}

多张图片的下载，需要压缩
下面是用的vue2技术：

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

  // 下载文件
function getFile (url) {
   
  return new Promise((resolve, reject) => {
    axios2.get(url, { responseType: 'arraybuffer' })
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        console.log(`Failed to download ${url}`, error);
        return null; // return null when request fails
      })
  })
}

export function downFileAll(images, packName) {
      const zip = new JSZip()
      const cache = {}
      const zip = new JSZip()
      const cache = {}
      const promises = images.map(url => getFile(url).then(data => {
        const arr_name = url.split("/");
        let file_name = arr_name[arr_name.length - 1];
        zip.file(file_name, data, {
          binary: true
        });
        cache[file_name] = data;
        return data; 
      }));
    
      return Promise.all(promises).then(() => {
   
        return zip.generateAsync({
    type: "blob" });
      }).then(content => {
   
        saveAs(content, packName);
      });
}

调用方法：
imageUrl1：是图片的url地址
downloadImages([‘imageUrl1’, ‘imageUrl2’, ‘imageUrl3’, …], ‘packName’);