事件委托实现文件列表批量下载，核心是监听父容器点击事件，通过target判断下载按钮并动态创建a标签触发blob下载，支持动态添加项和跨域资源，兼顾性能与兼容性。
用事件委托实现文件列表批量下载，核心是监听父容器的点击事件，通过事件对象的 target 判断是否点击了某个下载按钮，并动态创建并触发下载链接。这种方式避免为每个文件项单独绑定事件，提升性能，也支持动态添加的文件项。
1. HTML 结构：统一容器 + 数据标记
把所有文件项放在一个共同父容器中，每个下载按钮用 data-url 和可选的 data-filename 标记资源地址和建议文件名：
<div id="fileList">
<div class="file-item">
<span>report.pdf</span>
<button class="download-btn" data-url="/files/report.pdf" data-filename="年度报告.pdf">下载</button>
</div>
<div class="file-item">
<span>data.xlsx</span>
<button class="download-btn" data-url="/files/data.xlsx" data-filename="数据表.xlsx">下载</button>
</div>
</div>
2. JavaScript：委托监听 + 安全下载逻辑
在父容器上监听 click，检查点击目标是否为下载按钮；验证 URL 合法性后，用 fetch 获取 Blob 并触发下载（绕过跨域限制和浏览器对直接 a.download 的限制）：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
document.getElementById('fileList').addEventListener('click', function (e) {
const btn = e.target.closest('.download-btn');
if (!btn) return;
const url = btn.dataset.url;
const filename = btn.dataset.filename || url.split('/').pop();
if (!url) return;
// 防止恶意 URL（仅允许同源或已知可信域名）
try {
const parsed = new URL(url, window.location.origin);
if (parsed.origin !== window.location.origin && !['https://cdn.example.com'].includes(parsed.origin)) {
console.warn('不支持的下载源:', url);
return;
}
} catch (err) {
console.warn('无效 URL:', url);
return;
}
// 触发下载
fetch(url)
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.blob();
})
.then(blob => {
const a = document.createElement('a');
const urlObj = URL.createObjectURL(blob);
a.href = urlObj;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(urlObj);
})
.catch(err => console.error('下载失败:', err));
});
3. 批量下载：加一个“全选+下载”按钮
如果需要一键下载全部文件，可额外添加一个“批量下载”按钮，遍历所有按钮触发下载（注意：浏览器通常会拦截非用户手势触发的多个弹窗，所以推荐逐个触发并提示用户）：
<button id="batchDownload">批量下载选中文件</button>
对应 JS（配合 checkbox 实现选择）：
document.getElementById('batchDownload').addEventListener('click', function () {
const checkedBtns = document.querySelectorAll('.file-item input[type="checkbox"]:checked + .download-btn');
if (checkedBtns.length === 0) return;
checkedBtns.forEach(btn => {
const url = btn.dataset.url;
const filename = btn.dataset.filename || url.split('/').pop();
downloadFile(url, filename); // 复用上面的 fetch + blob 下载逻辑
});
});
function downloadFile(url, filename) {
fetch(url)
.then(r => r.blob())
.then(blob => {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = filename;
a.click();
URL.revokeObjectURL(a.href);
});
}
4. 注意事项与优化点
-
跨域限制：服务端需设置
Access-Control-Allow-Origin，否则fetch会失败；若无法改服务端，且资源在同域，可直接用a.href + click简化 - 大文件处理：Blob 下载会占用内存，超大文件建议后端生成临时直链，前端跳转下载
- 用户体验：添加 loading 状态、失败重试、进度提示（需服务端配合流式响应）
-
移动端兼容：iOS Safari 对
blob:URL 下载支持有限，可降级为window.open(url)（无自定义文件名）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
