js实现批量下载文件_js批量下载文件-CSDN博客

本文链接：https://blog.csdn.net/jinborui2/article/details/120948530

本文介绍了如何使用JavaScript实现批量下载图片的功能。通过点击按钮，可以触发多个下载链接依次下载图片，同时提供了两种不同的实现方法：一种是直接触发下载链接，另一种是通过创建canvas并转换为Blob对象来实现。此外，还提供了兼容IE浏览器的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现数据列表各自详情批量下载：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>批量下载</title>
</head>
<body>
	<button class="hula">批量下载</button>
	<a href="http://localtest.com/img/01.jpg" target="_blank" download="01.jpg" class="muldown">down1</a>
	<a href="http://localtest.com/img/02.jpg" target="_blank" download="02.jpg" class="muldown">down2</a>
	<a href="http://localtest.com/img/03.jpg" target="_blank" download="03.jpg" class="muldown">down3</a>
</body>
</html>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('.hula').click(function(){
			//方法一：
			/*let downbtns = $('.muldown');
			for (let x in downbtns) {
				//可以选择使用setTimeout,定时批量触发下载
				$(downbtns[x])[0].click();
			}*/

			//方法二：适用接口ajax请求批量下载
			let downHrefs = ["http://localtest.com/img/01.jpg", "http://localtest.com/img/02.jpg","http://localtest.com/img/03.jpg"];
			for(let i=0; i< downHrefs.length; i++){
				// window.open(downHrefs[i]);//能直接访问下载的地址，可以使用window.open()
				var currUrl = downHrefs[i].split("/");
				var  tarName = currUrl[currUrl.length - 1];
				console.log(tarName);
				downloadIamge(downHrefs[i], tarName);
			}
			
		});
	})

	function downloadIamge(imgsrc, name) {
	    //下载图片地址和图片名
	    var image = new Image();
	    // 解决跨域 Canvas 污染问题
	    image.setAttribute('crossOrigin', 'anonymous');
	    image.onload = function () {
	        var canvas = document.createElement('canvas');
	        canvas.width = image.width;
	        canvas.height = image.height;
	        var context = canvas.getContext('2d');
	        context.drawImage(image, 0, 0, image.width, image.height);
	        var _dataURL = canvas.toDataURL('image/png'); //得到图片的base64编码数据

	        var blob_ = dataURLtoBlob(_dataURL); // 用到Blob是因为图片文件过大时，在一部风浏览器上会下载失败，而Blob就不会

	        var url = {
	            name: name || "图片.png", // 图片名称不需要加.png后缀名
	            src: blob_
	        };

	        if (window.navigator.msSaveOrOpenBlob) {   // if browser is IE
	            navigator.msSaveBlob(url.src, url.name);//filename文件名包括扩展名，下载路径为浏览器默认路径
	        } else {
	            var link = document.createElement("a");
	            link.setAttribute("href", window.URL.createObjectURL(url.src));
	            link.setAttribute("download", url.name + '.png');
	            document.body.appendChild(link);
	            link.click();
	        }
	    };
	    image.src = imgsrc;

	    function dataURLtoBlob(dataurl) {
	        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
	            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
	        while (n--) {
	            u8arr[n] = bstr.charCodeAt(n);
	        }
	        return new Blob([u8arr], {type: mime});
	    }
	}
</script>

参考文献：js 图片下载（不是直接在页面打开图片）_Finchwei的博客-CSDN博客