download属性仅对同源URL生效，本地file://协议下必然失效；必须通过HTTP服务器运行，并确保href路径正确、文件真实存在；跨域下载需服务端配置Content-Disposition响应头或前端用fetch+Blob方案。
零基础也能做出可用的下载按钮，关键不是写多炫酷的代码，而是让 download 属性生效、文件路径可访问、浏览器不拦截——这三点卡住绝大多数新手。
为什么点按钮没反应？检查 download 属性是否被忽略
download 是 HTML5 新增属性，但它只对同源 URL 生效。如果你用的是本地 file:// 协议打开页面（比如双击 .html 文件），浏览器会直接无视 download，点击后跳转到文件地址而非下载。
- 必须通过本地服务器运行（如 VS Code 的 Live Server 插件、Python 的
python -m http.server） -
<a href="report.pdf" download>下载报告</a>中的report.pdf必须真实存在且路径正确 - 如果想指定下载文件名，可以加值：
download="用户手册_v2.pdf"，否则默认用 URL 最后一段
怎么让按钮看起来像按钮而不是链接？用 <button> + JavaScript 模拟点击
纯 <a> 标签样式受限，想用 <button> 又没法直接套 download——因为 <button> 不支持该属性。这时候得靠 JS 触发 <a> 的点击。
- 先隐藏
<a>标签（display: none），但别用visibility: hidden或opacity: 0，否则 JS 点击可能失败 - 给
<button>绑定onclick，创建临时<a>或复用已存在的 - 示例片段：
<button onclick="downloadFile('data.csv')">导出 CSV</button> <script> function downloadFile(filename) { const a = document.createElement('a'); a.href = filename; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); }</script>
跨域文件怎么下？服务端必须设置 Content-Disposition 响应头
如果文件来自其他域名（比如 OSS、CDN），download 会失效，浏览器当作普通跳转。此时不能靠前端解决，必须后端配合。
立即学习“前端免费学习笔记（深入）”；
- 服务端响应需包含：
Content-Disposition: attachment; filename="xxx.xlsx" - 前端只需普通
<a href="https://cdn.example.com/file.zip">，不用加download属性 - 注意：某些 CDN（如 Cloudflare）默认不透传该 header，要手动开启或配置规则
最容易被忽略的是协议和路径——本地双击 HTML 文件永远触发不了 download，哪怕代码全对；而相对路径写错一个字母，控制台连报错都不会有，只是静默失败。
