download属性仅对同源url或data:、blob:协议的标签生效，跨域时被浏览器静默忽略；文件名由download值决定但不可含路径字符，ios safari完全不支持，需用fetch+blob方案替代。
download 属性只对 <a></a> 标签有效，且有严格限制
HTML 的 download 属性本身不能直接触发任意内容导出，它仅作用于 <a></a> 元素，且浏览器会强制校验：目标 URL 必须是同源的（或 data URL），否则下载会被静默忽略，甚至降级为跳转。这意味着你不能用 <a download="result.json" href="https://api.example.com/export"></a> 这种方式绕过 CORS 导出服务端生成的内容。
常见错误现象：download 属性存在但点击后无反应、打开新标签页、或控制台报 Not allowed to navigate top frame to data URL（某些旧版 Safari）。
- 只支持
<a></a>，不支持<button></button>或 JS 直接调用 - href 必须是同源 URL 或
data:开头的字符串（如data:text/plain;charset=utf-8,hello） - Chrome/Firefox 支持 data URL 下载；Safari 16.4+ 才开始支持 data URL 的
download，更早版本会忽略该属性 - 文件名由
download属性值决定，但扩展名不会自动补全（比如设为download="report"，实际保存时可能无后缀）
导出运行结果代码的正确做法：用 Blob + URL.createObjectURL 构造 data URL
核心思路不是“让 HTML 自己导出”，而是用 JS 把运行结果（比如一段 JSON、JS 代码、HTML 字符串）构造成 Blob，再生成一个临时 URL 绑定到 <a></a> 上，最后模拟点击。这是目前最可靠、兼容性最好的方案。
示例（导出当前页面执行后的 result 对象为 JSON 文件）：
const result = { status: "success", data: [1, 2, 3] };
const blob = new Blob([JSON.stringify(result, null, 2)], { type: "application/json;charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "result.json";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url); // 及时释放，避免内存泄漏
- 必须指定
type，否则部分浏览器（如 Firefox）可能导出为.bin文件 -
charset=utf-8要显式写在 type 中，确保中文等字符不乱码 - 生成的 URL 是一次性有效的，
revokeObjectURL建议调用，尤其在高频导出场景下 - 不要复用同一个
<a></a>元素多次 click —— 某些移动端浏览器会失效，每次新建更稳妥
一键导出按钮如何绑定到真实运行结果上
关键在于：导出动作必须发生在“结果已就绪”之后，不能提前绑定静态内容。比如用户点击“运行”按钮后，异步拿到 output，这时才把导出逻辑注入按钮事件中，或动态更新 <a></a> 的 href 和 download。
- 避免在页面加载时就创建
<a></a>并固定href—— 那时result还不存在 - 如果使用框架（如 React/Vue），不要把
href写死在模板里，而应在数据响应后用 ref 或原生 DOM 更新a.href和a.download - 对于大体积内容（>50MB），
Blob构造和createObjectURL可能卡顿，需加 loading 状态并考虑分块或流式处理（但普通前端工具场景极少遇到） - 若需导出 HTML 页面快照（含样式），可用
innerHTML+document.documentElement.outerHTML，但注意移除 script 标签或动态 URL，否则本地打开会 404
IE 和老版 Edge 不支持 download 属性怎么办
IE 完全不支持 download 属性，老版 Edge（EdgeHTML）也仅部分支持。此时 fallback 方案不是“增强兼容”，而是换路径：用 msSaveBlob（IE/旧 Edge 专属 API）。
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, "result.json");
} else {
// 使用 createObjectURL + a.click 流程
}
-
navigator.msSaveBlob不需要<a></a>，直接触发保存对话框 - 无需 revoke，也不生成 URL，更轻量
- 现代项目若已放弃 IE 支持，这段可直接删掉
- 注意：Chrome 120+ 已废弃
createObjectURL对Blob的支持（但目前仍可用），未来可能要求用WritableStream，不过现阶段影响极小
result 是否为合法 JSON（比如包含 undefined、function），或忘记设置 charset=utf-8 导致中文变问号。这些细节不出错时一切正常，一出错就是“导出文件打不开”或“全是乱码”，排查起来反而比逻辑本身更耗时。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
