改造多文件批量下载函数：移除SourceElement并支持数组传参

针对现有单文件下载函数，我们可以通过以下改造实现数组批量下载，同时移除sourceElement参数，并解决浏览器批量下载拦截的问题：

改造后的完整代码 #

function downloadFiles(urls) {
    // 兼容单URL调用场景
    if (typeof urls === 'string') {
        urls = [urls];
    }

    urls.forEach((url, index) => {
        setTimeout(() => {
            disableOnUnloadPage = true;
            const link = document.createElement("a");
            link.href = url;
            // 避免跳转当前页面，同时规避部分浏览器下载拦截
            link.target = '_blank';
            // 隐藏临时创建的a标签
            link.style.display = 'none';
            
            document.body.appendChild(link);
            link.click();
            // 下载触发后移除临时元素，清理DOM
            document.body.removeChild(link);
            
            disableOnUnloadPage = false;
        }, index * 300); // 递增延迟，避免浏览器拦截批量自动请求
    });
}

关键改造点说明 #

• 参数适配：增加对字符串类型入参的兼容，既支持数组批量调用，也能兼容原单文件调用逻辑
• 规避浏览器拦截：通过setTimeout为每个下载请求设置递增的延迟（300ms间隔可按需调整），避免连续的自动点击被浏览器安全机制判定为恶意行为
• DOM清理：临时创建的<a>元素在触发下载后立即移除，避免DOM中堆积无用节点
• Target设置：指定target="_blank"，避免当前页面跳转，同时部分浏览器需要该属性允许自动下载

调用示例 #

// 批量下载示例
downloadFiles(["/1.jpg","/2.jpg","/3.jpg"]);

// 单文件下载（兼容调用）
downloadFiles("/document.pdf");

注意事项 #

• 延迟间隔可根据实际场景调整：过短可能仍触发浏览器拦截，过长会增加用户等待时间，300ms是经过验证的稳妥值
• 确保下载URL为同域资源：跨域文件下载需要服务器配置正确的CORS响应头，否则会被浏览器拦截
• 部分浏览器仍会弹出下载确认提示：这是浏览器的原生安全限制，无法通过前端代码完全绕过

内容的提问来源于stack exchange，提问作者shlkv