将前端 HTML 内容转为 Word 文档（.docx）的方式有很多，下面是几种绝对有效且实用的方法，适合不同前端场景：

✅ 方法一：使用 html-docx-js 生成 Word 文件（纯前端）

这是一个轻量级 JavaScript 库，可以将 HTML 直接转为 Word 文件，无需后端。

引入库

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html-docx-js/0.4.1/html-docx.min.js"></script>

示例代码

<div id="content-to-export">
  <h1>标题</h1>
  <p>这是一些内容。</p>
</div>

<button onclick="exportToWord()">导出为Word</button>

<script>
  function exportToWord() {
    var content = document.getElementById("content-to-export").innerHTML;
    var preHtml = '<html><head><meta charset="utf-8"></head><body>';
    var postHtml = '</body></html>';
    var html = preHtml + content + postHtml;

    var blob = window.htmlDocx.asBlob(html);
    saveAs(blob, '导出的文档.docx');
  }
</script>

✅ 方法二：使用 html2canvas + jsPDF（适合截图型导出）

如果你的 HTML 包含复杂样式、图表或 canvas，不容易解析成 Word，可以转为图像后再插入 Word 或 PDF。

步骤

  1. 用 html2canvas 将 DOM 转为图片
  2. 使用 jsPDF 保存成 PDF（或结合 docx 插入图片）

这种方法适合复杂展示页面，不适合纯文本导出。

✅ 方法三：使用 docx 库（前端构建 Word 文档结构）

使用微软的 docx 库（https://www.npmjs.com/package/docx），可以构建标准的 .docx 文件结构。

适合用 JS 构建文档结构化内容。

✅ 方法四：服务端辅助生成（Node.js 或 Python）

前端发送 HTML 内容给后端，由后端使用 python-docx、pandoc、mammoth 或 LibreOffice 将 HTML 转换为 Word。

但这需要服务器支持，不属于“纯前端”。

总结：推荐方案

需求场景推荐方法是否纯前端
普通文本 + 样式导出html-docx-js✅ 是
包含图表 / Canvashtml2canvas + jsPDF✅ 是
精准构建复杂 Worddocx 库✅ 是
高保真、批量导出后端渲染导出❌ 否