download属性仅对同源URL生效，跨域时退化为跳转；其值仅为建议文件名，浏览器可忽略；JS方案需用Blob+createObjectURL并及时revoke；语义上推荐button而非a标签。
download 属性只对同源 URL 生效
点击按钮触发下载，最直接的方式是用 <a> 标签配合 download 属性。但很多人试了发现点不动、没反应——大概率是因为 href 指向了跨域资源（比如 CDN 上的 PDF、远程 API 返回的 blob URL）。download 属性在浏览器中被严格限制：只有当 href 是同源 URL（协议、域名、端口完全一致）时才生效，否则会退化为普通跳转。
常见错误现象：
- 点击后页面跳转到文件地址，而不是下载
- 控制台无报错，但 download 属性被忽略（检查元素能看到它，但不起作用）
- 同源示例：
<a href="/files/report.pdf" download="monthly-report.pdf">下载报告</a> - 跨域失效示例：
<a href="https://cdn.example.com/data.csv" download>下载数据</a>→ 实际打开新页 - 如果必须下载跨域资源，得先用
fetch获取，再用Blob+URL.createObjectURL()构造本地 URL
download 属性值不是文件名保险箱
download 属性指定的是**建议保存的文件名**，浏览器有权忽略它。尤其在移动端 Safari 和部分旧版 Android 浏览器中，该属性完全不支持，用户看到的仍是原始 URL 中的文件名（或服务器响应头里的 Content-Disposition）。
- 写法：
<a href="data.pdf" download="2024-summary.pdf">—— 仅建议，不强制 - 如果服务器返回了
Content-Disposition: attachment; filename="server-name.xlsx"，Chrome 会优先采用这个 - 空值
download=""表示让浏览器自动推导文件名（从 URL 路径或响应头），并非“不设名称” - 不要依赖它来隐藏真实路径或做安全控制 —— 文件名可被用户轻易修改
用 JavaScript 触发下载更可控，但要注意 Blob 生命周期
当需要动态生成内容（如导出表格 CSV）、或处理跨域资源时，必须走 JS 方案。核心是创建 Blob，转成 URL.createObjectURL()，再模拟点击 <a>。
容易踩的坑是忘记释放对象 URL，导致内存泄漏：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 每次调用
URL.createObjectURL(blob)都会创建一个引用，必须配对调用URL.revokeObjectURL(url) - 最佳实践：点击后立即 revoke，哪怕用户取消下载也应清理（可用
setTimeout延迟一小会儿确保触发） - 示例关键片段：
const blob = new Blob([csvContent], { type: 'text/csv' });<br>const url = URL.createObjectURL(blob);<br>const a = document.createElement('a');<br>a.href = url;<br>a.download = 'export.csv';<br>a.click();<br>URL.revokeObjectURL(url); // 必须加这一行 - 注意：不能在
fetch().then()外部提前 revoke，否则 URL 在点击前就失效了
按钮样式和可访问性不能只靠 <a> 标签
把 <a> 当按钮用很常见，但它默认有下划线、焦点样式可能不符合设计。更重要的是，屏幕阅读器可能读作“链接”而非“按钮”，语义不对。
- 推荐组合：
<button type="button">+ JS 下载逻辑，语义清晰、样式自由 - 若坚持用
<a>，至少加role="button"和aria-label（例如aria-label="下载当前报表为 PDF"） - 禁用状态要同步控制：
a.disabled = true不生效，得用a.setAttribute('aria-disabled', 'true')并配合 CSS 灰色样式 - 移动端点击区域至少 44×44px，
<a>默认太小，需用 padding 或 display:block 扩展
真正麻烦的从来不是加个 download 属性，而是判断该用它还是绕开它——取决于资源来源、目标浏览器、是否需要自定义文件名、以及要不要支持离线生成。这些决策点比语法本身更消耗时间。
