html-docx-js 是最轻量靠谱的前端 html 转 word 方案，纯前端生成 .docx blob，支持内联样式和 utf-8 中文，但不支持 flex/grid、页眉页脚等高级特性。
用 document.execCommand('saveAs') 会失败，别试了
这个 API 在现代浏览器里基本被禁用了，Chrome 85+、Edge 89+、Firefox 也早就不支持，调用后直接静默失败，控制台可能连报错都没有。它只在 IE 或极老的 Electron 壳里能用，现在拿它导 Word 就是白忙活。
html-docx-js 是最轻量靠谱的选择
它不依赖后端，纯前端把 HTML 字符串转成 .docx 的二进制 blob，兼容性好，生成的 Word 文档能正常打开、编辑、带样式（内联 style、class 都认，但复杂 CSS Grid / Flex 会被忽略）。
- 必须传入完整的 HTML 字符串，不是 DOM 节点，所以得先用
element.outerHTML或new XMLSerializer().serializeToString(document.documentElement)拿到字符串 - 中文要加
encoding: 'UTF-8'配置项，否则 Word 里乱码（默认是 ASCII） - 图片只能转 base64 内嵌，不能用外链；如果 HTML 里有
<img src="https://..." alt="html怎么转换成word_html文档导出word格式【办公】" >，得提前 fetch 下来转成 data URL - 示例：
const html = '<h1>标题</h1><p>正文</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/2239" title="Short AI"><img src="https://img.php.cn/upload/ai_manual/000/000/000/175680314018795.png" alt="Short AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/2239" title="Short AI">Short AI</a> <p>AI短视频生成器，轻松创作爆款短视频！</p> </div> <a href="/ai/2239" title="Short AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>';<br>const blob = htmlDocx.asBlob(html, { encoding: 'UTF-8' });<br>saveAs(blob, 'report.docx');
Word 样式塌陷的三个真实原因
导出后发现加粗没了、字体变了、段间距消失——不是库的问题，是 Word 对 HTML 解析太保守：
立即学习“前端免费学习笔记（深入）”；
- Word 不识别
margin，只认margin-top这种单边属性；写margin: 10px会被整个忽略 -
display: flex、position: absolute、@media全部失效，布局得退回 table 或 inline-block - 字体名要用英文全称，比如
font-family: 'Microsoft YaHei'可以，font-family: '微软雅黑'在部分系统上会 fallback 成宋体
需要页眉页脚或分栏？得切后端
html-docx-js 不支持页眉、页脚、目录、分节符、页码这些 Office 特性。真要这些，就得走服务端方案：
- Node.js 环境用
docxtemplater+ HTML 插件，但需预定义模板 .docx 文件 - Python 用
python-docx从零构建，或者weasyprint先转 PDF 再用 LibreOffice 命令行转 docx（soffice --headless --convert-to docx file.pdf） - 关键提醒：所有“HTML → Word”方案都绕不开语义降级——Word 不是浏览器，它只认它认的那一套 HTML 子集，想完全还原网页渲染效果，本身就是个伪需求
