download属性仅对同源URL生效；跨域（含CDN、OSS、协议/端口/二级域名不同）、file://协议、iOS Safari均导致其被静默忽略，须用fetch+Blob方案或服务端Content-Disposition响应头解决。
download 属性只对同源 URL 生效
加了 download 属性却点不下载？大概率是 href 指向了跨域地址。浏览器会静默忽略该属性，点击后直接跳转或打开文件——不是 bug，是安全限制。
同源指协议、域名、端口三者完全一致。比如页面在 https://example.com:8080，href 必须也是这个 origin 下的路径，如 /files/report.pdf 或 https://example.com:8080/assets/data.csv。
- CDN 地址（
https://cdn.example.com/file.zip）、OSS 直链（https://bucket.oss-cn-hangzhou.aliyuncs.com/xxx.xlsx）都算跨域，download无效 -
file://协议下所有链接都不算同源，本地双击 HTML 文件时download基本不可用 - 控制台不会报错，但右键链接 → “另存为” 若弹出对话框，说明生效；若直接跳转，就是被忽略了
download 属性值怎么写才靠谱
download 的值不是可有可无的“建议名”，而是浏览器实际采用的保存名——但受严格校验。
- 值为空字符串（
download=""）或不设值，浏览器会从href路径末尾提取文件名（如/api/export?id=123→ 可能保存为123，无扩展名） - 显式写
download="invoice-2024.pdf"最稳妥，尤其当原始 URL 是动态接口路径时 - 值中不能含
/、\、控制字符等路径符号，否则整个属性被静默丢弃 - 中文名现代浏览器基本支持，但旧版 Safari 可能截断或乱码；英文+下划线更稳
跨域文件下载必须用 fetch + Blob
面对 CDN、API 接口返回的二进制流，download 属性形同虚设，唯一可靠路径是 JS 构造同源 blob URL。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须用
response.blob()，不是response.text()，否则中文或二进制内容损坏 - 服务端需允许 CORS（响应头含
Access-Control-Allow-Origin），否则 fetch 直接失败 - 创建
a元素后必须调用.click()，仅设置href和download不会触发下载 - 每次用完
URL.createObjectURL()后，务必调用URL.revokeObjectURL(url)，否则内存持续增长
示例关键逻辑：
fetch('/api/export?format=csv')
.then(res => res.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'export.csv';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
iOS Safari 完全不认 download 属性
无论同源与否，iOS/iPadOS Safari 对 download 属性和脚本触发的 .click() 都不支持。点击后只会尝试预览（PDF）或失败（Excel），没有提示，也不报错。
这意味着：纯前端方案在 iOS 上无法实现“一键下载”。可行解只有两个：
- 服务端响应头强制设
Content-Disposition: attachment; filename="xxx"（最可靠） - 前端降级提示用户“长按链接 → 选择‘下载’”，或引导右键“另存为”（桌面端）
别在 iOS 上测试 download 是否生效——它从来就没生效过。
