Batch download files
1. Analysis of ideas
- Solution 1: Collect all the files that need to be downloaded into an array, and traverse the download
- Solution 2: Package and download all files
2. Solution 1: Download one by one
Assemble data structures & create tags for download
// 组建数据结构
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);
};
Notice:
If a single file is too large, the label loading time will be correspondingly longer; while downloading a lot of files at the same time, it is very likely that the file being loaded will be missed due to the operation! ! !
2. Solution 2: Package and download
Front-end packaging using file-saver& pluginsjszip
Or the back-end students cooperate to create a packaged file interface to download directly