浏览器 download 属性仅支持纯字符串，动态文件名需用 js 拼接后赋值给 a.download；注意编码、长度、路径、内存泄漏及 ios 不支持等限制。
导出文件名怎么动态拼接字符串
浏览器 download 属性不支持表达式或变量，必须传入纯字符串。所以所谓“实时预览”，本质是：在用户点击前，用 JS 拼好名字，再塞进 a 标签或 Blob 构造逻辑里。
常见错误是直接写 <a download="report_${date}.xlsx"></a>——这不会执行插值，浏览器原样当文件名，下划线和花括号都保留。
- 用
new Date().toISOString().slice(0,10)生成2024-06-15这类安全字符，避免斜杠、冒号导致下载失败 - 中文、空格、emoji 要用
encodeURIComponent()编码，但注意：编码后文件名可能被浏览器解码显示异常，稳妥起见优先用 ASCII 字符 - 如果从表单取值（比如
input#title），记得监听input或change事件实时更新，别只在点击时读一次
用 URL.createObjectURL 控制文件名最可靠
当导出内容是动态生成的（比如 JSON 转 CSV、Canvas 导出图片），download 属性对 blob: URL 无效，必须靠 URL.createObjectURL + a.download 组合生效。
容易踩的坑：调用 createObjectURL 后没手动 revokeObjectURL，长期运行会内存泄漏；还有人把 download 设在 href 之前，导致部分浏览器忽略设置。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 顺序必须是：
const url = URL.createObjectURL(blob); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); -
filename中不要含路径（如./data/report.csv），浏览器只认最后一段，且可能过滤掉点号开头的名字 - Chrome 和 Edge 对长文件名（>200 字符）会截断，建议限制总长度，可用
filename.slice(0, 180) + '.csv'
Content-Disposition 响应头在后端导出时才管用
前端 JS 无法修改 HTTP 响应头，所以如果你走的是 fetch 请求后端接口导出文件，文件名完全由后端的 Content-Disposition: attachment; filename="xxx.csv" 决定。前端 JS 拼的名字在这里无效。
这时候“预览”只能是模拟：前端根据当前参数算出后端大概会用什么名，展示给用户看，但最终以响应头为准。若发现实际下载名和预览不一致，一定是后端没按约定生成或未正确设置响应头。
- 后端 Node.js 用 Express 时，确保用
res.setHeader('Content-Disposition', `attachment; filename="${encodeURI(filename)}"`)，注意双引号包裹 - Python Flask 里别用
send_file(..., as_attachment=True, download_name=...)（新版本），旧版要手动设 header，否则默认用路径名 - 测试时用浏览器开发者工具 → Network → 点开请求 → Headers → Response Headers 查看
Content-Disposition是否存在且格式正确
移动端 Safari 对 download 属性基本无视
iOS/iPadOS 的 Safari 不支持 a.download 触发下载，点击只会打开 Blob URL 或跳转，无法保存到文件 App。所谓“导出”在 iOS 上本质是分享或复制，文件名控制权不在前端。
这不是代码写错，是平台限制。很多团队卡在这儿反复调参数，其实该换思路：提供“复制内容”按钮 + 提示“请粘贴到 Excel”，或引导用户用桌面端操作。
- 检测方式：用
typeof HTMLAnchorElement.prototype.download === 'string'判断是否支持（Safari 返回undefined） - 不要试图用
document.execCommand('copy')模拟下载，它只能复制文本，且已废弃 - 如果必须导出，可考虑用
jszip打包后引导用户通过“分享表单”保存，但文件名仍不可控
download 属性都没生效。做预览逻辑前，先确认目标平台是否支持基础能力，比优化字符串拼接重要得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
