浏览器原生不支持HTML直接导出.docx，document.execCommand已废弃；可靠方案为服务端生成（如python-docx+BeautifulSoup解析HTML）或前端用html-to-docx（有CSS/图片限制），Pandoc转换质量最高但需预装。

HTML 字符串直接用 document.execCommand 无法生成 .docx 文件

浏览器原生不支持将 HTML 内容一键导出为 Word 文档（.docx）。document.execCommand('saveAs') 等旧 API 只在 IE 中部分生效，现代浏览器已废弃，且仅能触发“另存为网页（.htm）”，不是真正的 Word 格式。

真正可落地的方案只有两类：服务端生成（推荐）、或前端用 JS 库构造 .docx 结构（有限制）。

服务端生成：用 Python 的 python-docx 或 docxtpl 解析 HTML 需先转换

python-docx 本身不解析 HTML；它只操作 .docx 的底层 XML 结构。要把 HTML 转成 Word，得先做 HTML → DOM → 文本/段落/表格映射。

• 用 BeautifulSoup 解析 html_string，遍历
  、
  、
  、 等标签
  对每个节点，调用 document.add_paragraph() 或 document.add_table() 手动重建内容
  内联样式（如 style="color:red"）需自行提取并映射到 paragraph.runs[0].font.color.rgb
  图片需先下载或转 base64，再用 document.add_picture() 插入（注意路径或字节流）

  from docx import Document
  from bs4 import BeautifulSoup
  
  html = "
  标题
  正文
  立即学习“前端免费学习笔记（深入）”；
  "
  soup = BeautifulSoup(html, 'html.parser')
  doc = Document()
  
  for tag in soup.find_all(['h1', 'p']):
      if tag.name == 'h1':
          doc.add_heading(tag.get_text(), level=1)
      elif tag.name == 'p':
          doc.add_paragraph(tag.get_text())
  
  doc.save('output.docx')

  前端用 docxtemplater + html-to-docx 的局限很现实

  html-to-docx（npm 包）能在浏览器中把简单 HTML 转成 .docx Blob，但它不支持 CSS 布局（flex、grid）、不渲染背景图、忽略 @media 查询，且表格嵌套超过 2 层易错位。

  

  Lovart

  全球首个AI设计智能体

  下载

  更关键的是：生成的 .docx 实际是 ZIP + XML 拼装，体积比原 HTML 大 3–5 倍，Word 打开时可能报“文件已损坏”——尤其含中文或特殊字体时。

  • 必须确保 HTML 是语义化结构，避免
    这类纯样式容器
  • 所有图片需为绝对 URL 或 base64，相对路径（如 ./img/logo.png）会丢失
  • 导出前建议用 DOMPurify.sanitize() 清理 XSS 风险 HTML，否则 html-to-docx 可能抛错

  最稳路径：后端接收 HTML，用 Pandoc 转换（支持复杂格式）

  pandoc 是命令行工具，能高质量把 HTML 转 .docx，支持 CSS、目录、页眉页脚、甚至数学公式（需加 --mathml）。

  Node.js 后端可调用：

  const { exec } = require('child_process');
  exec('pandoc input.html -o output.docx --standalone', (err) => {
    if (err) console.error('Pandoc failed:', err);
  });

  Python 后端可用 subprocess.run 调用相同命令。注意：pandoc 需预装，且 HTML 中的本地资源（如 CSS、图片）要转为内联或公网可访问链接，否则生成的 .docx 里资源缺失。

  真正难的从来不是“怎么点一下导出”，而是 HTML 里有没有 position: absolute、有没有 Vue 动态插值、有没有未加载完的异步图片——这些都会让转换结果和预期差很远。