脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → jszip插件图片打包下载

jszip插件实现图片打包下载的方法分析 原创

原创  更新时间：2023年05月19日 09:15:46   原创 投稿：shichen2014  
这篇文章主要介绍了jszip插件实现图片打包下载的方法,结合实例形式分析了JavaScript使用jszip插件依据图片列表打包下载zip压缩文件的相关操作技巧,需要的朋友可以参考下

前言

由于后端使用php、node.js、java等进行大量的图片下载操作可能会导致服务器负载过高，所以将图片下载转移到客户端是个不错的选择，借助 HTML5 中的新特性 Blob 和 URL.createObjectURL API 实现。

实现代码

function download(){
  var urls = [
    "https://example.com/img1.jpg",
    "https://example.com/img2.png"
  ];
  var zip = new JSZip();
  var count = 0;
  urls.forEach((url, index) => {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (xhr.status === 200) {
        var name = url.substring(url.lastIndexOf("/") + 1);
        zip.file(name, xhr.response);
      }
      count++;
      if (count === urls.length) {
        zip.generateAsync({type:"blob"}).then(function(content) {
          saveAs(content, "pictures.zip");
          console.log("下载成功");
        });
      }
    };
    xhr.send();
  });
}

另外，注意：在页面顶部还需要引入jszip插件

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
</head>

这样可以将图片下载过程从服务器转移到客户端，从而减轻服务器压力。同时需要注意的是，在使用客户端进行大量图片下载时，也要防止网络请求并发数量过多导致浏览器崩溃。

您可能感兴趣的文章:

相关文章

最新评论