能，download属性可直接指定文件名，但仅限同源url或blob:协议；跨域时无效，需用fetch+blob或服务端content-disposition头配合。
download属性能直接指定文件名吗？
能，但仅限于同源 URL 或 blob: 协议的链接；跨域链接（比如指向 CDN 的图片或 PDF）设置 download 属性后，浏览器会忽略它，仍按原始 URL 路径或响应头里的 Content-Disposition 决定文件名。
怎么用 download 属性写死文件名？
在 <a></a> 标签里直接写 download="report.pdf"，浏览器下载时就会用这个值作为默认文件名：
<a href="/api/export" download="monthly-report-2024.pdf">导出报表</a>
注意几点：
-
href必须是同源地址，否则download无效（Chrome/Firefox 都如此） - 值可以含扩展名，也可以不含；不含时浏览器会尝试根据 MIME 类型补（但不可靠）
- 值中不要用路径分隔符（如
/、\），否则可能被截断或忽略 - 空字符串
download=""表示让浏览器用 URL 路径的最后一段作文件名
跨域资源想自定义文件名怎么办？
只能绕过 <a download></a>，改用 JavaScript 触发 Blob 下载：
fetch('/cdn/chart.png')<br> .then(r => r.blob())<br> .then(blob => {<br> const url = URL.createObjectURL(blob);<br> const a = document.createElement('a');<br> a.href = url;<br> a.download = 'my-chart.png'; // 这里可以任意命名<br> a.click();<br> URL.revokeObjectURL(url);<br> });
关键点：
- 必须用
fetch拿到Blob，再生成blob:URL —— 这才是同源的 - 服务端需允许跨域（
Access-Control-Allow-Origin），否则 fetch 会失败 - 大文件注意内存，下载完立刻调用
URL.revokeObjectURL()
服务端配合更稳妥的方案
如果后端可控，最省事的是让接口返回正确的 Content-Disposition 响应头：
Content-Disposition: attachment; filename="invoice-202405.pdf"
这样即使用户右键另存为，或通过非 download 属性的链接访问，也能拿到预期文件名。前端只需普通链接：
<a href="/api/invoice/123">下载发票</a>
注意：
- 文件名建议用 ASCII 字符，避免中文乱码（可加
filename*=UTF-8''...支持 UTF-8 编码） - 某些旧版 IE 不支持
filename*，需同时提供传统filename字段 - 该方式不依赖前端 JS，兼容性比 Blob 方案更好
真正麻烦的不是怎么写 download，而是判断当前链接是否同源、要不要走 fetch + Blob、还是干脆交给后端处理——这三个路径选错一个，文件名就失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
