当前位置：网站首页>JS to download files in batches

JS to download files in batches

2022-06-13 08:19:00 【Parthenocissus still works】

Realize batch downloading of data list details ：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title> Bulk download </title>
</head>
<body>
	<button class="hula"> Bulk download </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(){
			// Method 1 ：
			/*let downbtns = $('.muldown');
			for (let x in downbtns) {
				// You can choose to use setTimeout, Scheduled batch trigger downloading 
				$(downbtns[x])[0].click();
			}*/

			// Method 2 ： Applicable interface ajax Request bulk download 
			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]);// You can directly access the download address , have access to window.open()
				var currUrl = downHrefs[i].split("/");
				var  tarName = currUrl[currUrl.length - 1];
				console.log(tarName);
				downloadIamge(downHrefs[i], tarName);
			}
			
		});
	})

	function downloadIamge(imgsrc, name) {
	    // Download picture address and picture name 
	    var image = new Image();
	    //  To solve the cross domain  Canvas  pollution problem 
	    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'); // photographic base64 Encoding data 

	        var blob_ = dataURLtoBlob(_dataURL); //  be used Blob Because the picture file is too large , The download will fail on a wind browser , and Blob Won't 

	        var url = {
	            name: name || " picture .png", //  There is no need to add... To the picture name .png Suffix name 
	            src: blob_
	        };

	        if (window.navigator.msSaveOrOpenBlob) {   // if browser is IE
	            navigator.msSaveBlob(url.src, url.name);//filename The file name includes the extension , The download path is the browser default path 
	        } 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>

reference ：js Images are downloaded （ Instead of opening the picture directly on the page ）_Finchwei The blog of -CSDN Blog

原网站

版权声明
本文为[Parthenocissus still works]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202270544563878.html

边栏推荐

猜你喜欢

随机推荐