1. 思路解析
- 方案1: 将所有的需要下载的文件集合到一个数组里,遍历下载
- 方案2: 将所有文件打包下载
2. 方案一:逐个下载
组装数据结构 & 创建标签进行下载
// 组建数据结构
const downloadFiles = () => {
const downloadList = fileList.map((item, index) => {
return {
name: item.fileName,
href: "" // 这里组装下载地址
};
});
const triggerDelay = 100;
const removeDelay = 1000;
downloadList.forEach((item, index) => {
createIFrame(item.href, index * triggerDelay, removeDelay);
});
};
// 创建标签进行下载
const createIFrame = (url, triggerDelay, removeDelay) => {
setTimeout(function() {
// 动态添加iframe,设置src,然后删除
const frame = document.createElement("iframe"); //创建标签
frame.setAttribute("style", "display: none");
frame.setAttribute("src", url);
frame.setAttribute("id", "iframeName");
frame.setAttribute("type", "application/pdf");
document.body.appendChild(frame);
setTimeout(function() {
document.body.removeChild(frame);
}, removeDelay);
}, triggerDelay);
};
注意:
若单个文件过大,标签加载的时间会相应越长;同时下载文件很多,很可能会因操作而漏掉正在加载的文件!!!
2. 方案二: 打包下载
使用file-saver
& jszip
插件进行前端打包
或者后端同学配合出一个打包后的文件接口直接下载