当 HTML 页面通过 file:// 协议直接打开时，<a download> 无法触发下载，这是浏览器同源策略限制所致；必须通过本地 HTTP 服务器（如 localhost）提供服务才能正常使用该属性。
当 html 页面通过 `file://` 协议直接打开时，`` 无法触发下载，这是浏览器同源策略限制所致；必须通过本地 http 服务器（如 `localhost`）提供服务才能正常使用该属性。
在现代浏览器（Chrome、Edge、Firefox 等）中，<a> 标签的 download 属性是一个便捷的前端下载机制，允许开发者指定点击后强制下载而非导航或预览资源。但其生效有严格前提：目标资源必须与当前页面同源（same-origin）。
然而，当你双击 HTML 文件在浏览器中直接打开（URL 形如 file:///Users/xxx/index.html），整个页面运行在 file:// 协议下。此时，即使图片 https://www.php.cn/link/62c4b9a1d1083cb06f39c0034e17309b 与 HTML 文件位于同一文件夹，浏览器仍将 file:///.../https://www.php.cn/link/62c4b9a1d1083cb06f39c0034e17309b 视为一个独立的、不可信的“跨源”资源——因为 file:// 协议不支持同源判定（两个 file:// 路径默认被视为不同源）。因此，download 属性被静默忽略，浏览器退化为默认行为：打开图片（target="_self"）或新标签页预览（target="_blank"）。
✅ 正确做法：使用本地 HTTP 服务器启动页面
无需复杂配置，推荐以下轻量方案：
-
Python 3（内置）：
# 在 HTML 文件所在目录执行 python3 -m http.server 8000
然后访问 http://localhost:8000/，此时页面运行于 http://localhost:8000，而 ./https://www.php.cn/link/62c4b9a1d1083cb06f39c0034e17309b 解析为 http://localhost:8000/https://www.php.cn/link/62c4b9a1d1083cb06f39c0034e17309b，二者同源，download 即可正常工作。
立即学习“前端免费学习笔记（深入）”；
-
Node.js（需安装 http-server）：
npm install -g http-server http-server -p 8000
✅ 示例修复后的 HTML（需通过 localhost 访问）：
<!DOCTYPE html> <html> <head><title>Download Demo</title></head> <body> <!-- ✅ 同源环境下有效 --> <a href="https://www.php.cn/link/62c4b9a1d1083cb06f39c0034e17309b" download="hero-image.jpg">下载图片（重命名）</a><br> <a href="https://www.php.cn/link/62c4b9a1d1083cb06f39c0034e17309b" download>下载图片（保持原名）</a> </body> </html>
⚠️ 注意事项：
- download 属性仅对同源 URL 生效，不支持跨域链接（如 https://example.com/file.pdf）、data: URL 或 blob: URL（后者需配合 URL.createObjectURL() + a.href 动态设置）；
- download 值为可选字符串，若提供则作为下载文件名（可含扩展名），否则取 href 中的文件名；
- Safari 目前完全不支持 download 属性（包括 localhost 环境），需用 JavaScript + fetch + Blob + URL.createObjectURL() 方案降级处理；
- 不要滥用 target="_blank" 配合 download——target 与 download 互斥：一旦启用 target，浏览器将忽略 download 并执行跳转。
? 总结：download 属性不是“失效”，而是被浏览器按安全规范主动拦截。根本解法是脱离 file://，拥抱 http://localhost。这不仅是 download 的要求，也是现代前端开发（如模块加载、Service Worker、Fetch API 等）的通用前提。养成本地起服务的习惯，既是解决问题的钥匙，也是迈向工程化开发的第一步。
