js实现web端批量下载

使用场景：比如一个展现pdf文档列表的网页内需要允许客户自己勾选(可多选)需要打包下载的内容，最终以zip文件的形式在浏览器下载

此功能也可在服务端实现，但是在web端实现可以降低服务器负载，提升客户体验。

下面是代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

</head>

<body>
<script>
async function batch(){
var zip = new JSZip();
// 需要下载的文件链接数组，替换成你要下载的内容
let files=["https://abc.com/1.pdf","https://abc.com/2.pdf"];
// 遍历下载文件并放入zip
for(let file of files){
// 使用浏览器自带的XMLHttpRequest
let data = await download(file);
// 使用axios
// let res = await axios.get(file,{responseType: 'blob'});
zip.file(file.substring(file.lastIndexOf('/')),data);
}
// 生成zip文件
let content = await zip.generateAsync({ type: "blob" });
// 触发浏览器下载
saveAs(content, "example.zip");
}
// 使用XMLHttpRequest实现，也可使用axios取代该方法
function download(url) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.responseType = "blob";
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject(xhr.statusText);
}
};
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
// 自动运行下载
batch().then(()=>{}).catch(console.log)
</script>
</body>
</html>