当使用 html `download` 属性指定下载文件名时，若其值包含 url 查询字符串（如 `?1646327099`），浏览器会将非法字符 `?` 自动替换为下划线 `_`，造成文件名污染；正确做法是仅在 `href` 中保留完整带参 url，而 `download` 属性值应为纯净的文件名。
在 Web 开发中，尤其是 Laravel Blade 模板中，我们常通过 标签配合 download 属性实现前端触发文件下载。但一个容易被忽视的细节是：download 属性的值并非必须与 href 一致，且它对字符串合法性有严格要求。
根据 HTML 标准规范，download 属性用于显式指定下载后的文件名（不含路径），其值需符合操作系统对文件名的基本约束——例如，?, *, /, \, :, ", , | 等均属于非法字符。当浏览器（Chrome、Edge 等基于 Chromium 的内核）遇到此类字符时，不会报错，而是采用“静默降级”策略：统一替换为下划线 _。这正是你观察到 _storage_1_aviary-image-1429352137570.jpeg_1646327099 这一异常名称的根本原因。
✅ 正确实践是分离职责：
- href 属性承载可访问的资源地址（允许含查询参数，用于缓存控制、签名验证或 CDN 版本管理）；
- download 属性仅提供用户本地保存时的建议文件名（必须为合法、无特殊符号的纯文件名）。
以你的 Laravel 示例为例，假设 $item['url'] 为 /storage/1_aviary-image-1429352137570.jpeg?1646327099，则应在后端确保 $item['filename'] 提取为 1_aviary-image-1429352137570.jpeg（推荐使用 basename(parse_url($url, PHP_URL_PATH)) 安全解析）：
立即学习“前端免费学习笔记（深入）”；
<a
href="{{ $item['url'] }}"
class="btn btn-sm btn-default"
download="{{ $item['filename'] }}"
target="_blank"
>
<span class="fa fa-download"></span> 下载
</a>⚠️ 注意事项：
- download 属性仅对同源 URL 生效；若 href 指向跨域资源（如 OSS、S3 直链），该属性将被忽略，浏览器回退至 href 中的原始路径推导文件名（此时查询参数仍可能被截断或忽略）；
- 不要依赖 download="{{ basename($item['url']) }}"，因为 basename() 无法自动剥离查询字符串，需显式处理；
- 在 Vue/React 等前端框架中动态渲染时，同样需确保传入 download 的值已清洗，避免服务端未过滤的风险；
- 如需支持 IE 或旧版 Safari，需降级为服务端生成带 Content-Disposition 头的响应，因这些浏览器不支持 download 属性。
总结：download 属性的本质是“客户端重命名提示”，而非 URL 解析器。坚持“href 负责可达性，download 负责可读性”的设计原则，即可规避所有因 URL 特殊字符引发的文件名异常问题。
