【JS 】实现多张图片打包成压缩包下载

最新推荐文章于 2024-08-04 16:33:59 发布

七月_Mo

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量460

点赞数 4

分类专栏： Js 文章标签： javascript

本文链接：https://blog.csdn.net/Mozifei73/article/details/136941595

版权

Js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

import axios from 'axios';
import JSZip from 'jszip';

const imgs=[
 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]

const handleDownload = async () => {
  var zip = new JSZip();

  for (let url of imgs) {
    let fileName = url.split('/').pop();
    let { data } = await axios({
      method: 'get',
      url,
      responseType: 'blob',
    });

    zip.file(fileName, data);
  }

  zip.generateAsync({ type: 'blob' }).then(function (content) {
    let url = window.URL.createObjectURL(content);

    downloadFile(url, 'images');
  });
};


function downloadFile(url, name) {
  let a = document.createElement('a');

  a.href = url;
  a.download = name;
  a.click();
}