前端批量下载

1. 经典痛点：A 标签批量下载的跨域阻断

在前端开发中，最常见的文件下载触发方式是动态创建一个 <a> 标签。

// 常见的单文件下载逻辑
const a = document.createElement('a');
a.href = url; // 资源链接
a.download = name; // 指定下载后的默认文件名
a.click();
a.remove();

警告

批量与跨域灾难 当使用上述代码在一个 for 循环中批量触发多个文件下载时，由于现代浏览器的安全防护策略，跨域资源的 download 属性将被视为无效。这会导致只有前一两个请求能成功发起，剩余的下载请求会在 Network 面板中被强行阻断并标记为 Canceled。

---

2. 终极方案：基于隐藏 Iframe 的降级触发

为了绕过 A 标签在循环触发时的并发拦截机制，一种更为可靠和隐蔽的降级方案是使用不可见的 <iframe> 挂载资源。

2.1. 核心实现逻辑

function downloadFileViaIframe(url) {
    const iframe = document.createElement('iframe');
    // 将 iframe 彻底隐藏，不影响页面 DOM 视觉
    iframe.style.display = 'none';
    iframe.style.height = 0;

    // 注入目标文件地址
    iframe.src = url;

    // 关键步骤：与 A 标签不同，iframe 必须真实地挂载到 DOM 树上才会触发底层网络请求
    document.body.appendChild(iframe);

    // 延时清理 DOM，给予浏览器足够的时间捕获 Header 并启动下载流
    setTimeout(() => {
        iframe.remove();
    }, 1000);
}

// 批量调用时
// urlList.forEach(url => downloadFileViaIframe(url));

(注：此方案仅适用于服务端在响应头中已正确配置了 Content-Disposition: attachment 强制触发下载的场景。如果服务端未配置，将导致 iframe 内部直接预览解析文件。)