download 属性仅是同源下的文件名建议和下载意图提示，是否真正下载取决于 href 是否同源、服务端是否返回 Content-Disposition: attachment 及文件类型是否被浏览器预览。

download 属性为什么点了还是打开 PDF 而不是下载

它根本不是“触发下载”的开关，只是个同源场景下的文件名建议 + 下载意图提示。浏览器是否真下载，取决于三件事：href 是否同源、服务端是否返回 Content-Disposition: inline、文件类型是否被浏览器默认预览（如 application/pdf、image/png）。加了 download 但点开仍是 PDF 预览，大概率是服务端没设 Content-Disposition: attachment，或者 href 指向了跨域地址（比如 CDN 上的 https://cdn.example.com/report.pdf）——此时该属性直接被忽略。

同源静态文件怎么用 download 安全生效

必须同时满足：协议 + 域名 + 端口完全一致，且服务端不返回 Content-Disposition: inline。常见可落地写法：

• <a href="/assets/data.xlsx" download="用户导出表.xlsx">下载 Excel</a> —— ✅ 推荐，路径相对、同源、扩展名明确
• <a href="./report.pdf" download>下载报告</a> —— ✅ download 值为空时，浏览器会从 URL 路径提取文件名（report.pdf）
• <a href="data:text/plain;charset=utf-8,Hello%20World" download="hello.txt">下载文本</a> —— ✅ data: URL 天然同源，download 生效
• 避免写成 href="https://your-domain.com:8080/file.json" —— ❌ 端口不同即算跨源，download 失效

跨域或 API 返回文件流时必须走 fetch + Blob

当 href 是 https://api.example.com/export?format=csv 或 https://oss.aliyuncs.com/file.zip，download 属性完全无效，唯一可控路径是 JS 构造本地 blob URL：

• 服务端接口必须返回 Access-Control-Allow-Origin（允许当前域名），否则 fetch 直接被 CORS 拦截
• 一定要用 response.blob()，不用 response.text() —— 否则二进制文件（如 Excel、PDF）会损坏
• a.href 必须先赋值，再设 a.download；顺序反了在 Safari 和部分 Chrome 版本中静默失败
• 必须调用 URL.revokeObjectURL(url)，否则每次下载都复制一份数据到内存，大文件频繁下载会撑爆内存
• iOS Safari 全系不支持脚本触发下载，哪怕 blob URL 同源，点击后也只预览 —— 这点容易被忽略，需提前告知用户右键“保存到文件”

真正强制下载的控制权其实在服务端

前端 download 是弱提示，Content-Disposition: attachment 响应头才是硬指令。只要服务端返回这个头，无论是否同源、是否加 download、什么浏览器，都会弹下载框：

• Nginx 静态文件配置：add_header Content-Disposition "attachment";（注意无法动态设 filename）
• Express 中：res.setHeader('Content-Disposition', 'attachment; filename="export-2026.csv"');
• PHP 中：header('Content-Disposition: attachment; filename="data.json"');
• 如果服务端已返回 Content-Disposition: attachment; filename="server-name.pdf"，前端 a.download 的值会被大多数浏览器忽略

最易被忽略的其实是服务端响应头和前端路径的配合关系：你以为加了 download 就万事大吉，其实浏览器早把决定权交给了后端那行 Content-Disposition。跨域、iOS、PDF 预览问题，归根结底都是在提醒你——别只盯着 HTML 标签，得看那一整条 HTTP 响应链。