HTML草稿自动命名需前端显式指定文件名，因浏览器无文件系统权限；应基于document.title或h1文本清洗（去特殊符、截断长度、补日期），再通过a.download或Blob下载触发，注意跨平台兼容性。
HTML草稿自动命名为什么不能只靠前端
浏览器里纯 HTML 文件没有文件系统权限，saveAs() 或下载触发的文件名必须由 JavaScript 显式指定，且无法在保存前读取“最终生成的本地路径”——这意味着所谓“自动命名”，本质是「提前算好名字，再塞给下载逻辑」。
常见错误现象：click to save 后文件名固定为 draft.html，或用 Date.now() 但没截断毫秒导致名字太长；更隐蔽的是中文标题直接进文件名，在 Windows 上可能触发编码异常（如 %E4%BD%A0%E5%A5%BD.html）。
- 使用场景：编辑页导出 HTML 草稿、笔记工具一键存档、CMS 前端预览后保存
- 关键限制：不依赖后端时，只能基于当前 DOM 内容（如
document.title或某个h1元素文本）生成名字 - 性能影响几乎为零，但字符串清洗（去空格、特殊符号、长度截断）这一步漏掉，会导致 Safari 下下载失败或文件名被截断
用 document.title 生成文件名的实操要点
这是最轻量、兼容性最好的起点，但 document.title 经常含网站名前缀（如 我的笔记 - 博客后台），直接用会污染文件名。
- 先做基础清洗：
title.replace(/[-\s\u3000]+/g, '-').replace(/[^\w\u4e00-\u9fa5-]/g, '')—— 合并空白与全角空格为短横，删掉除字母、汉字、数字、短横外的所有字符 - 强制长度限制：超过 32 字符就截断，避免 macOS/Linux 对长文件名的隐式截断（实际存储可能变成
xxxxxxxxxxxxxxxxxxxxxxxxxxxx…） - 补时间戳防重：不是拼完整
new Date().toISOString()，而是用new Date().toISOString().slice(0,10).replace(/-/g,'')得到20240520，加在开头或结尾都行 - 示例输出：
20240520-如何用CSS实现垂直居中.html
从 h1 标签提取标题时的兼容性陷阱
很多编辑器把正文标题放在 里，比 document.title 更贴近用户意图。但要注意 DOM 尚未加载完成时取不到，或页面有多个 的情况。
- 安全取法：
document.querySelector('h1')?.textContent?.trim() || document.title，用可选链避免报错 - 中文标点要过滤：顿号、逗号、冒号、问号这些在文件名里虽不报错，但部分 shell 工具处理困难，建议统一转成短横或删掉
- 注意富文本编辑器的副作用：某些编辑器会在
里塞或内联样式，textContent能绕过，但innerText可能触发重排，优先用前者 - 如果
是空的（比如刚打开新草稿页），必须 fallback 到时间戳命名，否则得到.html这种非法文件名
下载时 filename 参数的写法细节
真正决定保存文件名的是 a.download 属性或 Blob 构造时的选项，不是链接地址本身。很多人卡在这步。
- 用
标签触发下载：link.download = filename + '.html'; link.href = url;—— 注意filename不能含路径（如./draft/xxx.html），浏览器会忽略斜杠前所有内容 - 用
Blob方式：new Blob([htmlContent], {type: 'text/html'})，然后URL.createObjectURL()，最后赋给a.href；此时download属性仍需显式设置 - Windows 用户容易踩的坑：文件名含
:、*、?、"、、>、|会直接报错，清洗正则里必须覆盖这些 - 测试建议：在 Edge 和 Safari 下各试一次，Safari 对 Unicode 文件名支持弱，纯汉字+数字组合最稳
真正麻烦的不是生成名字，而是清洗规则要同时扛住中文、英文、emoji、各种 CMS 导入的脏数据，以及不同操作系统对文件名的容忍度差异。多测几个边界 case，比堆逻辑更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
