firefox对download属性的文件名后缀要求最严格，必须显式写出完整合法后缀（如download="用户数据.xlsx"），不带后缀（如download="report"）会静默失效；中文名需确保html文件、meta声明及编辑器均为无bom utf-8编码；ios safari则完全无视download属性和a.click()，需依赖服务端content-disposition响应头配合预签名url重定向。
Firefox 对 download 属性的文件名后缀要求最严格
Firefox 不会自动补全扩展名，也不接受不带后缀的 download 值。比如资源是 PDF，但你写 download="报告"，它可能直接放弃下载，或退化为原始 URL 文件名（如 xxx.pdf）。Chrome 和 Edge 虽会尝试补全，但行为不一致，不能依赖。
必须显式写出完整合法后缀：
-
download="用户数据.xlsx"✅ -
download="2024年汇总.csv"✅（UTF-8 中文名现代浏览器已支持） -
download="report"❌（Firefox 静默失效） -
download="data.json"✅（即使响应头是application/json，也必须带 .json）
中文文件名在 Chrome / Edge 中偶尔乱码，根源在编码链路断裂
浏览器解析 download 属性值时，不经过 HTTP 头，所以 Content-Disposition 里的 filename*=UTF-8''... 编码对它完全无效。乱码只发生在 HTML 源码本身——如果你的 .html 文件保存为 GBK 或带 BOM 的 UTF-8，浏览器按错误编码读取 download 字符串，就会显示乱码。
确保三处统一为无 BOM 的 UTF-8：
- HTML 文件本身用无 BOM UTF-8 编码保存
-
<meta charset="UTF-8">必须出现在最早位置 - 编辑器/IDE 设置默认编码为 UTF-8（Sublime、VS Code、RStudio 等均需确认）
fetch + Blob 方案里 a.download = filename 不触发 Firefox 中文名
用 fetch 获取 blob 后，给 a.download 赋值中文名，在 Firefox 中常被截断或显示为方块。这不是 bug，而是它对 Blob 下载场景中 download 属性的解析更保守。
绕过方式不是改 a.download，而是靠后端配合生成正确 Content-Disposition：
- 前端请求同源代理接口（如
/api/download?id=123） - 后端 fetch 远程资源，设置响应头：
Content-Disposition: attachment; filename*=UTF-8''%E6%8A%A5%E5%91%8A.csv - 此时浏览器按标准 RFC 5987 解析，中文名稳定生效
纯前端 Blob 场景下硬要支持 Firefox 中文名，目前无可靠方案；encodeURI 拼接 href 的 hack 在新版 Firefox 已基本失效。
iOS Safari 完全无视 download 属性和脚本 click()
iOS Safari 全系（包括 iOS 17+）既不支持 download 属性，也不响应 a.click() 触发下载。哪怕你用 fetch + Blob + createObjectURL 构造出完美链接，调用 .click() 也不会弹出保存框——这是系统级限制，无法前端绕过。
唯一可行路径：
- 服务端生成预签名 URL（如 S3 presigned URL），返回重定向到该地址
- 前端用
window.location.href = url导航过去，由 Safari 自行处理下载 - 注意：该 URL 必须带正确
Content-Disposition响应头，否则仍可能打开预览
这个限制常被忽略，直到真机测试才发现整个下载流程卡死——它不报错、不警告，只是静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
