jszip插件实现图片打包下载的方法分析 <font color=red>原创</font>
作者：shichen2014 时间：2024-05-09 10:34:34
前言
由于后端使用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>
这样可以将图片下载过程从服务器转移到客户端，从而减轻服务器压力。同时需要注意的是，在使用客户端进行大量图片下载时，也要防止网络请求并发数量过多导致浏览器崩溃。
标签：js,jszip,插件,图片
0
投稿猜你喜欢
2010怎么就宅了——我们是设计星球的阿凡达
2010-03-09 13:26:00
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2023-09-15 20:13:57
Python2.x版本中cmp()方法的使用教程
2022-08-19 01:23:40
使用pandas批量处理矢量化字符串的实例讲解
2023-09-22 03:00:01
使用cgroups来限制MySQL企业备份服务对资源的占用
2024-01-19 18:47:23
python使用Flask操作mysql实现登录功能
2024-01-21 02:20:00
大前端时代搞定PC/Mac端开发,我有绝招(收藏版)
2023-02-13 08:38:58
PHP的mysqli_select_db()函数讲解
2023-06-07 18:59:44
golang中json和struct的使用说明
2023-10-09 13:09:10
Python实现求数列和的方法示例
2021-07-15 05:27:08
python实现从ftp上下载文件的实例方法
2021-04-24 16:37:02
Vue.js通用应用框架-Nuxt.js的上手教程
2024-04-28 10:54:31
六个窍门助你提高Python运行效率
2021-07-19 08:31:15
详解微信小程序文件下载--视频和图片
2023-08-10 16:38:50
Python监控服务器实用工具psutil使用解析
2021-10-14 03:16:24
python脚本爬取字体文件的实现方法
2022-09-07 18:20:55
如何将Python列表转换为字符串
2023-11-02 12:54:27
PyTorch中的CUDA的操作方法
2022-02-24 18:54:41
Django如何将URL映射到视图
2021-11-21 14:28:41
python十进制和二进制的转换方法(含浮点数)
2021-04-03 02:26:24