批量下载图片
if (obj.event === 'download') {//批量下载
var arr=[]
arr.push(obj.data.qrCode)
arr.push(obj.data.appQrCode)
for (let i = 0; i < arr.length; i++) {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.style.height = 0;
iframe.src = arr[i];
// 与前两种方式不同,iframe需要挂载到页面上才能触发请求
document.body.appendChild(iframe);
setTimeout(() => {
iframe.remove();
}, 1000);
}
}
总结:
下载单个文件
1.最简单的方式
window.open(url, '_blank');
2.通过a标签实现
const a = document.createElement('a');
a.href = url; // 文件链接
a.download = name; // 文件名,跨域资源download无效
a.click();
a.remove();
3.通过iframe实现
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.style.height = 0;
iframe.src = url;
// 与前两种方式不同,iframe需要挂载到页面上才能触发请求
document.body.appendChild(iframe);
setTimeout(() => {
iframe.remove();
}, 1000);
批量下载文件
-
window.open看似最简洁,最完美,然而实际执行时却:只成功下载了一两个文件,其余的被当作恶意重定向被拦截了
-
通过a标签下载
对于同源文件,通过a标签可以实现批量下载能力
跨域文件,同样只成功下载了一两个文件,其余文件请求出现canceled -
最后是iframe
for (let i = 0; i < arr.length; i++) {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.style.height = 0;
iframe.src = arr[i];
// 与前两种方式不同,iframe需要挂载到页面上才能触发请求
document.body.appendChild(iframe);
setTimeout(() => {
iframe.remove();
}, 1000);
}