在 Web 开发中，使用 HTML5 的 download 属性实现前端触发文件下载是一种常见需求。但需特别注意：download 属性的值并非 URL，而是指定下载后保存的文件名（basename）。该值受操作系统和浏览器对合法文件名字符的限制——例如 ?、&、/、# 等 URL 特殊字符在文件系统中不被允许，因此现代浏览器（Chrome、Edge、Firefox）会在解析 download 值时主动进行“容错处理”：将这些非法字符统一替换为下划线 _。
以问题中的链接为例：
<a href="https://www.php.cn/link/6c5532cd89a43796f19e4ac21f3b8c72" download="https://www.php.cn/link/6c5532cd89a43796f19e4ac21f3b8c72">
虽然 href 正确指向带时间戳的资源（确保缓存绕过），但 download 属性错误地将整个 URL（含 ?1646327099）作为文件名传入，导致浏览器生成不合规的文件名 _storage_1_aviary-image-1429352137570.jpeg_1646327099。
✅ 正确实践是 职责分离：
立即学习“前端免费学习笔记（深入）”；
- href：承载完整可访问的资源地址（含查询参数，用于服务端鉴权、缓存控制或版本标识）；
- download：仅提供语义清晰、符合文件命名规范的纯文件名（不含路径、协议、查询参数）。
在 Laravel Blade 模板中，应确保 $item['filename'] 字段已剥离查询参数。推荐在后端构造该字段（例如使用 PHP 的 pathinfo() 或正则提取）：
// 示例：控制器中规范化文件名 $item['url'] = 'https://www.php.cn/link/6c5532cd89a43796f19e4ac21f3b8c72'; $item['filename'] = pathinfo(parse_url($item['url'], PHP_URL_PATH), PATHINFO_BASENAME); // → '1_aviary-image-1429352137570.jpeg'
对应前端模板写法如下：
<a href="{{ $item['url'] }}"
class="btn btn-sm btn-default"
download="{{ $item['filename'] }}"
target="_blank">
<span class="fa fa-download"></span> 下载
</a>⚠️ 注意事项：
- download 属性仅对同源 URL 生效（跨域链接即使设置了 download，浏览器也会忽略并执行普通跳转）；
- 若需支持跨域下载，须配合后端设置 Content-Disposition: attachment; filename="xxx.jpg" 响应头，并通过 fetch + Blob + URL.createObjectURL() 方式实现；
- 始终验证 $item['filename'] 的安全性：过滤空字节、路径遍历（../）、控制字符等，防止恶意文件名注入；
- 在 Vue/React 等框架中动态绑定 download 时，同样需确保传入的是纯净 basename，而非原始 URL。
总结：download 属性的本质是“客户端重命名提示”，不是 URL 解析器。尊重其设计语义——让 href 负责定位资源，让 download 专注定义文件名——即可彻底规避因查询参数引发的文件名污染问题。
