html是纯文本格式,无需转换;所谓“转换”实为导出(如word→html)或解析(如html→markdown),office导出冗余多,推荐pandoc;提取结构化内容宜用turndown或cheerio;innerhtml直接赋值会破坏dom状态与交互。

HTML 文件本身不是一种需要“转换”的格式,它就是纯文本;所谓“转换”,实际是把其他格式(如 Word、Markdown、PDF)导出或渲染成 HTML,或者把 HTML 解析/提取成别的结构(如 Markdown、JSON)。直接用文本编辑器打开 .html 文件改后缀名,不会改变内容本质。
怎么把 Word / Excel / PPT 转成 HTML
Office 套件导出 HTML 是最常见需求,但结果常让人失望:生成大量冗余 <span></span>、内联样式、class 名带随机哈希,且不兼容现代前端流程。
- 用 Microsoft Word →「另存为」→ 选择「网页 (*.htm; *.html)」→ 选「筛选过的网页」比「单个文件网页」稍干净,但仍含
mso-前缀样式 - LibreOffice 更可控:导出时勾选「仅限 HTML 格式」+「不嵌入 CSS」,能减少
style属性滥用 - 真正想用于开发?别依赖 Office 导出。用
pandoc处理源文档更可靠:pandoc input.docx -o output.html --standalone - 注意:Excel 表格转 HTML 默认用
<table>,但缺失语义化属性(如 <code>scope、aria-label),手动补或用脚本注入怎么把 HTML 提取成 Markdown 或纯文本
目标是丢掉标签、保留结构逻辑,但
innerHTML直接取文本会丢失换行和标题层级,而简单正则又容易崩在嵌套标签上。- 浏览器环境优先用
DOMParser+document.body.textContent拿纯文本,但会抹平所有段落区分 - 要保留标题/列表结构?用
turndown库(npm 包):new TurndownService().turndown(document.body),它能识别<h2></h2>→##、<ul><li></ul>→- - Node.js 环境推荐
cheerio+ 手写规则:先$("script, style").remove()清除干扰节点,再遍历"h1,h2,p,ul,ol"分别映射 - 坑:含
<figure><figcaption></figcaption></figure>的图片块,turndown默认不处理,需注册自定义 rule
为什么用
innerHTML替换内容后页面乱了直接赋值
element.innerHTML = htmlString看似简单,但会销毁原有 DOM 节点、重置事件监听、清空表单值、中断 Web Component 生命周期。立即学习“前端免费学习笔记(深入)”;
- 如果只是更新局部文本,优先用
textContent或innerText(后者受 CSS 影响) - 必须插入 HTML?确保字符串已做过 XSS 过滤,不要直接拼接用户输入:
DOMPurify.sanitize(dirtyHtml) - 动态插入含
<script></script>的 HTML?innerHTML不执行其中脚本,得手动eval或创建<script></script>标签 append,但极不推荐 - Vue/React 项目里硬塞
innerHTML,会绕过响应式系统,后续数据更新不再触发视图重绘
真正麻烦的从来不是“怎么转”,而是转完之后的语义对齐、样式继承、交互状态保持——比如一个从 Word 粘贴进来的
<div style="margin:0px auto;">,在 CSS Grid 布局里可能完全失效,但错误不会报在控制台里。</div> - 浏览器环境优先用










