download属性对中文文件名支持不佳，chrome/edge基本可用但safari等存在编码错误；跨域、服务端content-disposition头、非法路径会导致回退原文件名；最可靠方案是blob+url.createobjecturl或服务端用rfc 5987标准设置content-disposition头。
download 属性对中文文件名的支持现状
HTML 的 download 属性本身不处理编码，浏览器按自身策略解析属性值。Chrome 和 Edge（Chromium 内核）通常能正确显示 UTF-8 编码的中文名，但 Safari 和旧版 Edge 会将其当作 Latin-1 解码，导致“导出_订单.xlsx”变成“导出__订å•.xlsx”或截断为“导出_”。这不是你写错了，是浏览器实现差异。
为什么 href="./files/报告.pdf" + download="报告.pdf" 有时仍保存为 "report.pdf"
常见原因有三个：
- 链接目标是跨域资源（如 CDN 上的
https://cdn.example.com/report.pdf），download属性被浏览器静默忽略，回退到原始 URL 文件名 - 服务器返回了
Content-Disposition: inline; filename="report.pdf"，覆盖了前端设置（尤其在 Nginx/Apache 未显式禁用时） - 路径含非法字符或相对路径层级错误（如
download="../export/报告.pdf"），部分浏览器拒绝解析，降级使用原始名
真正可控的中文命名方案：Blob + URL.createObjectURL
绕过 download 属性的编码限制，用 JS 构造本地 Blob URL 是目前最可靠的方式：
fetch('/api/export?format=xlsx')
.then(res => res.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '2026年10月销售报表.xlsx'; // 此处中文名完全由 JS 控制
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 及时释放内存
});
关键点：
- 服务端必须返回纯二进制流（
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet），不能重定向或返回 HTML 错误页 -
a.download赋值发生在 DOM 操作前，不受同源或协议限制 - 务必调用
URL.revokeObjectURL()，否则 Blob 对象常驻内存，大量导出易引发卡顿
服务端配合更稳妥：用 Content-Disposition 头
如果后端可控（比如用 Node.js/Python/FastAPI），直接让响应头带标准编码的 Content-Disposition，比前端 hack 更彻底：
例如 FastAPI 中：
@app.get("/export")
async def export():
file_path = "report.xlsx"
with open(file_path, "rb") as f:
content = f.read()
return Response(
content=content,
media_type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
headers={
"Content-Disposition": 'attachment; filename*=UTF-8\'\'2026%E5%B9%B410%E6%9C%88%E9%94%80%E5%94%AE%E6%8A%A5%E8%A1%A8.xlsx'
}
)
注意：filename*=UTF-8'' 是 RFC 5987 标准写法，单引号后必须是 URL 编码后的文件名，浏览器兼容性远好于纯中文 download 属性。
复杂点在于：前端无法干预服务端响应头，一旦后端没设或设错，所有前端努力都白搭；而 Blob 方案虽灵活，但要求完整加载文件到内存——大文件（>100MB）容易触发 OOM 或卡死页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
