jszip插件实现图片打包下载的方法分析 原创
投稿：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>
这样可以将图片下载过程从服务器转移到客户端，从而减轻服务器压力。同时需要注意的是，在使用客户端进行大量图片下载时，也要防止网络请求并发数量过多导致浏览器崩溃。