HTML属性Download：如何在标签中触发文件强制下载逻辑-html教程-PHP中文网

download属性仅对同源url（协议、域名、端口完全一致）、data:或blob:协议链接生效；跨域、file://、safari全系及ie中均失效，需用fetch+blob方案替代。

html属性download：如何在标签中触发文件强制下载逻辑

download 属性本身不触发下载，它只在满足特定条件时「允许」浏览器将链接目标作为文件保存——不满足条件时，该属性会被直接忽略，点击后仍会导航或打开资源。

哪些链接能用 `download`？

只有同源 URL（协议、域名、端口完全一致）才生效。跨域资源即使加了 download，浏览器也会无视它，退化为普通跳转或新标签页打开。

✅ @#@#@#@#@#@#@#@#@#@0（同源静态文件）
✅ @#@#@#@#@#@#@#@#@#@1（Data URL，始终同源）
❌ @#@#@#@#@#@#@#@#@#@2（跨域，download 被丢弃）
❌ @#@#@#@#@#@#@#@#@#@3（跨域 API，无效）

`download` 的文件名行为细节

值为空字符串（download=""）时，浏览器尝试从 URL 路径中提取文件名；提供非空值（如 download="invoice-2024.pdf"）则强制使用该名称，但扩展名必须与响应内容类型兼容，否则可能被重写或拒绝。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

服务端返回 Content-Type: application/pdf，但 download="report.xlsx" → 浏览器可能改名为 report.xlsx.pdf 或截断扩展名
服务端未返回 Content-Disposition 头时，download 是唯一可控文件名的方式
如果服务端已设置 Content-Disposition: attachment; filename="server-name.json"，多数浏览器会优先采用服务端指定名，download 被忽略

替代方案：当 `download` 不可用时怎么办？

跨域、动态生成、或需控制响应头的场景下，得绕过 <a download></a>，改用 fetch + URL.createObjectURL + <a></a> 模拟点击。

fetch('/api/export')
  .then(r => r.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'export-data.json'; // 这里命名有效
    a.click();
    URL.revokeObjectURL(url); // 立即释放，避免内存泄漏
  });