如何使用ReactJs创建并导出样式完好的Word文档

你提供的参考布局属于常规结构化表单排版，以下3种落地方案按适配优先级排序，可根据自身项目情况选择，核心满足「A4尺寸对齐、导出样式与React页面一致、支持表单填写后导出」的需求：

方案1：HTML转docx高保真方案（推荐，改造量最小，还原度95%+） #

这个方案完全复用你已经写好的A4页面布局，不需要重复开发排版逻辑，核心逻辑是将用户填写完成后的页面DOM处理为带全量内联样式的静态HTML，再封装为标准docx格式，Word自带的HTML渲染引擎足以覆盖绝大多数表单、报表、简历类布局需求。

实现步骤 #

• 先统一页面与Word的尺寸基准，从根源避免排版错位：
  给A4容器固定尺寸，和Word默认A4参数完全对齐：

  .a4-container {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm 15mm; /* 匹配Word默认常规边距，自定义边距可自行调整数值 */
    margin: 0 auto;
    background: #fff;
    box-sizing: border-box;
    /* 优先选用Word内置字体，避免导出后字体fallback导致排版错位 */
    font-family: "Microsoft Yahei", Arial, sans-serif;
  }
  

• 导出前做DOM预处理：
  • 遍历所有input、textarea、select等输入控件，读取用户填写的value值，替换为同一样式的纯文本节点，移除输入框边框、焦点态等交互样式
  • 将所有外部引用的图片转为base64格式内嵌
  • 把所有外部CSS定义的计算后样式转为元素内联style，避免样式丢失
• 安装依赖：npm i file-saver html-docx-js
• 核心导出逻辑代码：

  import { saveAs } from 'file-saver';
  import htmlDocx from 'html-docx-js/dist/html-docx';
  
  const handleExportDocx = () => {
    // 获取预处理完成的静态A4页面DOM
    const pageDom = document.querySelector('.a4-container');
    const pageContent = pageDom.outerHTML;
  
    // 拼接完整HTML文档，强制指定A4页面规则
    const exportHtml = `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <style>
            @page { size: A4; margin: 0; }
            body { margin: 0; padding: 0; }
          </style>
        </head>
        <body>${pageContent}</body>
      </html>
    `;
  
    // 生成docx文件并触发下载
    const docxBlob = htmlDocx.asBlob(exportHtml);
    saveAs(docxBlob, '导出文档.docx');
  };
  

注意事项 #

• 不要使用Word HTML渲染引擎不支持的CSS属性：包括复杂Grid嵌套、CSS变量、滤镜、transform变形、动态计算的flex宽度等，常规盒模型、边框、背景色、字体样式、文本对齐、普通表格、静态定位均可完美渲染
• 所有资源、样式必须内嵌到导出的HTML字符串中，不要依赖外部CSS、外部图片链接，否则导出后会出现样式丢失、图片加载失败的问题

方案2：docx原生生成方案（还原度100%，适合长期迭代） #

如果后续需要支持Word原生特性，比如目录、页码、批注、修订、权限控制，可以使用docx库通过JS API直接声明文档结构、样式、内容，生成原生格式的docx文件，不存在HTML转义的兼容问题。
缺点：你已经开发完成的React布局无法直接复用，需要对照现有布局的尺寸、样式，用docx的API重新编写排版逻辑，需要同时维护Web端和导出端两套布局代码，初期开发量更大。

核心代码示例 #

安装依赖：npm i file-saver docx

import { Document, Packer, Paragraph, TextRun, PageSize, PageMargin } from 'docx';
import { saveAs } from 'file-saver';

const handleExportDocx = async (formData) => {
  const doc = new Document({
    sections: [{
      properties: {
        page: {
          size: PageSize.A4,
          margin: { top: 1134, right: 850, bottom: 1134, left: 850 } // 对应20mm/15mm边距，单位为Word原生缇单位
        }
      },
      children: [
        // 对照现有React布局，依次拼接标题、段落、表格等内容，设置对应样式
        new Paragraph({
          children: [new TextRun({ text: formData.title, bold: true, size: 32 })]
        }),
        // 其余内容按布局结构补充
      ]
    }]
  });

  const docxBlob = await Packer.toBlob(doc);
  saveAs(docxBlob, '导出文档.docx');
};

方案3：高清图片兜底方案（适配复杂视觉效果） #

如果你的布局使用了大量Word不支持的视觉效果，比如渐变、阴影、特殊图形、自定义字体图标，可以将用户填写完成的A4页面截取为高清图片，再将图片按A4尺寸插入到docx文件中，视觉上可以做到和Web页面100%一致。
缺点：导出的文档内容为图片格式，无法选中、编辑文字，文件体积相对更大。

核心代码示例 #

安装依赖：npm i file-saver docx html2canvas

import html2canvas from 'html2canvas';
import { Document, Packer, Paragraph, ImageRun, PageSize } from 'docx';
import { saveAs } from 'file-saver';

const handleExportDocx = async () => {
  const pageDom = document.querySelector('.a4-container');
  // 截取2倍高清图避免模糊
  const canvas = await html2canvas(pageDom, { scale: 2, useCORS: true });
  const imgBase64 = canvas.toDataURL('image/png');
  const imgBuffer = Uint8Array.from(atob(imgBase64.split(',')[1]), c => c.charCodeAt(0));

  const doc = new Document({
    sections: [{
      properties: { page: { size: PageSize.A4, margin: 0 } },
      children: [
        new Paragraph({
          children: [
            new ImageRun({
              data: imgBuffer,
              transformation: { width: 794, height: 1123 }, // 对应96dpi下A4的像素尺寸
              type: 'png'
            })
          ]
        })
      ]
    }]
  });

  const docxBlob = await Packer.toBlob(doc);
  saveAs(docxBlob, '导出文档.docx');
};

选型建议 #

• 追求快速上线、现有布局已经开发完成，优先选择方案1，改造成本最低，完全匹配你当前参考布局的导出需求
• 后续需要迭代复杂Word原生功能、对文档可编辑性要求极高，选择方案2
• 布局包含大量特殊视觉效果、不要求导出后文字可编辑，选择方案3

内容的提问来源于stack exchange，提问作者Radika Dilanka