HTML导出Word文档

简介

在前端开发中，有时我们需要让用户将页面上的内容（如报告、表格或文章）导出为 Word 文档。通过原生 JavaScript 和简单的 MIME 类型设置，即可实现 HTML 内容一键导出为 .doc 文件。

实现原理

利用 data:application/msword 协议，将 HTML 字符串转换为 Blob 并触发下载。虽然生成的是 .doc 格式，但本质上仍是 HTML 内容，兼容大多数 Word 软件。

示例代码

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

<script>
function exportToWord() {
  const html = `<html xmlns:o='urn:schemas-microsoft-com:office:office'
                xmlns:w='urn:schemas-microsoft-com:office:word'
                xmlns='http://www.w3.org/TR/REC-html40'>
                <head><meta charset='utf-8'></head>
                <body>
                  <h1>这是从HTML导出的Word文档</h1>
                  <p>当前时间：${new Date().toLocaleString()}</p>
                </body></html>`;

  const blob = new Blob(['\ufeff', html], {
    type: 'application/msword'
  });

  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = '导出文档.doc';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}
</script>

注意事项

• 该方法生成的是伪 .doc 文件，实际内容为 HTML，适用于简单排版。
• 复杂样式（如 CSS3、Flex、Grid）可能无法在 Word 中正确显示。
• 如需生成标准 .docx 文件，建议使用后端库（如 python-docx、docxtemplater 等）。