js 批量下载文件为压缩包_js批量下载文件生成zip-优快云博客

本文链接：https://blog.youkuaiyun.com/huangdan891029/article/details/128135650

有一个需求，是列表里面有很多图片或者pdf文件的url，用户想要一个批量下载，点击按钮后，把列表的这些文件全部都下载下来，并且是一个压缩包，包里面包含那些url对应的文件。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>doc</title>

</head>
<body>
 <button onclick='packageImages()'>批量下载</button>


<!-- 下面是需要用到的js -->

<script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.staticfile.org/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdn.staticfile.org/axios/1.2.0/axios.min.js"></script>




<script>
   function packageImages() {
		
		var imgsSrc = ['https://img-home.csdnimg.cn/images/20201124032511.png', 'https://csdnimg.cn/medal/qixiebiaobing4@240.png']; // 这里可以替换为自己的逻辑，比如从哪里获取之类的

		var promises =[]
		const zip = new JSZip();
		for(let item of imgsSrc){
			let axios = getFile(item).then(({data})=>{
				let fileName = getFileName(item) //文件名
				zip.file(fileName, data, {binary: true});
			})
			promises.push(axios)
		}


		Promise.all(promises).then(() => {
			if (Object.keys(zip.files).length > 0) {
				zip.generateAsync({type: 'blob'}).then((blob) => {
					saveAs(blob, 'files.zip');
					console.log('批量下载成功')
				});
			} else {
				console.log('下载全部失败')
			}
		});
	}
	

	function getFileName(filePath){
		var startIndex = filePath.lastIndexOf("/");
		if(startIndex != -1)
			return filePath.substring(startIndex+1, filePath.length).toLowerCase();
		else return "";
	}

	function getFile(url){
		return new Promise((resolve, reject) => {
					axios({
						url,
						method: 'GET',
						responseType: 'blob',
					})
					.then((data) => {
						resolve(data);
					})
					.catch((err) => {
						reject(err.toString());
					});
		});
	}


</script>

</body>
</html>