下载按钮需用JavaScript动态创建带download属性的隐藏标签触发，download仅对同源或blob URL生效，跨域链接无效；表格中用data-属性传参并事件委托；fetch需调用response.blob()并显式设置download文件名；移动端须在点击同步上下文中执行click避免被拦截。
下载按钮点击后没反应？检查 download 属性是否生效
HTML 原生 <button> 本身不触发下载，必须配合 JavaScript 才能发起文件获取。很多人误以为加个 download 属性到 <button> 就行——其实 download 只对 <a> 标签有效，<button> 完全忽略它。
正确做法是：用 <button> 触发 JS，再动态创建并点击一个带 download 的隐藏 <a> 元素。注意以下几点：
-
download属性仅对同源 URL 或 blob URL 生效；跨域链接（如直接指向https://example.com/file.pdf）会忽略该属性，浏览器只打开而非下载 - 如果后端返回的是流式响应（如 API 接口），必须用
fetch+response.blob()构造 blob URL，不能直接赋给<a href> - 动态创建的
<a>必须 append 到document.body后再 click，否则部分浏览器（如 Safari）不执行
表格里多个下载按钮怎么绑定不同文件？用 data- 属性传参
在 <table> 中每行一个下载按钮时，避免写一堆重复事件监听器。推荐把文件标识或路径存在 data-url 或 data-id 里，统一用委托处理：
<tr> <td>报告A</td> <td><button type="button" class="download-btn" data-url="/api/export?id=123">下载</button></td> </tr> <tr> <td>报告B</td> <td><button type="button" class="download-btn" data-url="/api/export?id=456">下载</button></td> </tr>
JS 绑定一次即可：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('click', e => {
if (e.target.classList.contains('download-btn')) {
const url = e.target.dataset.url;
triggerDownload(url);
}
});
这样既减少 DOM 查询开销，又方便后续增删行而不需重新绑定。
后端返回二进制流时，fetch 怎么正确处理 blob 下载？
常见错误是直接把 API 返回的 JSON 当作文件内容，或者没设 responseType。实际要确保：
- 请求头中明确设置
Accept: application/octet-stream（某些后端依赖此判断返回类型） -
fetch后调用response.blob()，而不是response.text()或response.json() - blob 构造 URL 后，必须指定
download文件名，否则浏览器可能用随机名或无后缀
示例关键片段：
async function triggerDownload(apiUrl) {
const res = await fetch(apiUrl, { method: 'GET' });
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'report.pdf'; // 这里必须显式命名
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 及时释放，尤其多文件场景下防内存泄漏
}
移动端点击失效或弹窗被拦截？绕过 Safari 和 iOS 的限制
iOS Safari 对非用户手势触发的 click() 非常严格——比如异步回调里（setTimeout、fetch.then）调用 a.click() 会被静默拒绝。解决方案只有两个：
- 所有下载逻辑必须在原生点击事件的同步上下文中启动（即不能等
await完才构造<a>） - 对需要鉴权或异步获取 URL 的场景，先用同步方式创建一个空 blob 占位，再替换 href 和 download 属性（Safari 允许后续更新）
更稳妥的做法是：按钮点击后立即显示 loading 状态，同时发起请求；拿到 blob 后，直接复用已插入 DOM 的 <a> 元素，仅更新其 href 和 download，再触发 click —— 这样 Safari 认为仍是同一手势链。
真正麻烦的不是代码长度，而是 blob 生命周期管理、跨域策略和移动端行为差异。这些细节不处理好，按钮在桌面跑得好好的，一上真机就静音。
