浏览器取消一次下载多个文件，只下载最后一个及解决方案

问题描述：业务需求需要用户选择资源进行批量下载

方法1：window.open
方法2：setTimeout
方法3: iframe

问题原因：

本质上是浏览器在完成上一个下载链接必须要做的的准备工作之前，就单击了下一个链接，从而取消了上一个下载操作；

如果这不是下载，而是页面的常规链接，那么这就是用户想要的行为：

• 如果用户首先点击页面 A 的链接，然后失去耐心并点击页面 B 的另一个链接，那么页面请求 A 在那一点被取消
• 不需要同时加载两个资源，因为无论如何只能一个页面同时只能展示一个;

解决方案：

方法1： 利用 window.open(url) 实现

let m1 = document.querySelector('.m1');
m1.addEventListener('click',  () => {
    for (let i = 0; i < resourceArr.length; i++) {
        window.open(resourceArr[i])
    }
})

缺点：需打开新的窗口体验不好

方法2：利用 setTimeout 添加定时器

const createDowloadLink = (url) => {
    let aDom = document.createElement('a') //创建标签i
    aDom.setAttribute('download', ''); //dowload设置下载属性
    let evt = document.createEvent('HTMLEvents') //创建事件
    evt.initEvent('click', false, false) //初始化事件，绑定点击事件，不冒泡，不阻止浏览器默认行为
    aDom.href = url;
    aDom.dispatchEvent(evt) //分发事件
    aDom.click() // 触发事件
}
let m2 = document.querySelector('.m2');
m2.addEventListener('click',  () => {
    resourceArr.forEach((item, index) => {
        setTimeout(() => {
            createDowloadLink(item)
        }, 500 * (index + 1))
    })
})

缺点：时间间隔设置不好，同样会造成有些资源无法下载，例如，如果网速慢，资源响应时间长，这个时候的定时时长就不好估计

image.png

image.png

方法3： 利用 iframe

const iframeDownload = (link) => {
    var iFrame = document.createElement('iframe');
    iFrame.src = link;
    iFrame.style.display = 'none';
    document.body.appendChild(iFrame);
}
let m3 = document.querySelector('.m3');
m3.addEventListener('click',  () => {
    for (let item of resourceArr) {
        iframeDownload(item);
    }
})

参考链接：

1. Browser is cancelling multiple file download requests
2. 一次下载多个文件的解决思路-JS