a标签多文件下载时只下载最后一个文件的问题

在项目中，我们常常会遇到一些下载的需求

问题描述：有个文件列表List，需要把List里面的文件循环依次下载

代码如下：
downloadFile(item){
	let url =  '/file/downloadknowledge?filelde' + item.fileId,
	filename = item.filename,
	link = document.createElement('a');
	link.style.display = 'none';
	link.href = urllink.setAttribute('download', filename);
	document. body.appendchild(link);
	link.click();
	document.body.removechild(link)
}
doumloadileAll(files){
	let _this = this
	files.forEach((item)=>{
		_this.downloadFile(item)
	})
}

但是运行代码发现。files = [1,2,3]。只下载了“3”这个文件。

原因分析

由于安全限制，现代浏览器会阻止同时的多个下载，用户必须对每个下载都进行交互（点击或接受下载）。脚本试图启动超过一个的下载可能会被阻止。

解决方案

方案一：使用setTimeout 实现文件的逐个下载。
设置一个间隔时间，让a标签依次隔一段时间触发。
方案二：使用iframe实现批量下载

urls.forEach((url, index) => {
    // 创建一个新的 iframe 元素
    let iframe = document.createElement('iframe');
    // 将 iframe 的 'src' 属性设置为文件的 URL
    iframe.src = url;
    // 设置 iframe 的 'id' 以便稍后移除
    iframe.id = 'download_iframe_' + index;
    // 将 iframe 设置为隐藏
    iframe.style.display = 'none';
    // 将 iframe 添加到页面中
    document.body.appendChild(iframe);
});

对于大文件，iframe可以直接触发下载，不需要将文件数据读入内存中，对内存消耗较小。
iframe方法对文件的源没有限制。
方案三：
使用blob对象和window.url.creatObjectURL
原生js完成前端文件下载
方案四：
使用promise.all()异步下载文件等