react如何绘制word表

使用 docx 库生成 Word 表格

在 React 中生成 Word 表格可以通过 docx 库实现。这是一个专门用于创建和操作 .docx 文件的 JavaScript 库。安装依赖后，可以动态生成表格并下载为 Word 文档。

安装依赖：

npm install docx

示例代码：

import { Document, Paragraph, Table, TableRow, TableCell, WidthType, Packer } from "docx";

const generateWordTable = () => {
  const table = new Table({
    rows: [
      new TableRow({
        children: [
          new TableCell({ children: [new Paragraph("姓名")], width: { size: 2000, type: WidthType.DXA } }),
          new TableCell({ children: [new Paragraph("年龄")], width: { size: 2000, type: WidthType.DXA } }),
        ],
      }),
      new TableRow({
        children: [
          new TableCell({ children: [new Paragraph("张三")] }),
          new TableCell({ children: [new Paragraph("25")] }),
        ],
      }),
    ],
  });

  const doc = new Document({ sections: [{ children: [table] }] });
  Packer.toBlob(doc).then(blob => {
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "表格.docx";
    link.click();
  });
};

function App() {
  return <button onClick={generateWordTable}>生成 Word 表格</button>;
}

使用 html-docx-js 转换 HTML 表格

如果已有 HTML 表格结构，可以使用 html-docx-js 将其转换为 Word 文档。这种方式适合从现有页面内容生成 Word 文件。

安装依赖：

npm install html-docx-js

示例代码：

import { asBlob } from "html-docx-js";

const exportAsWord = () => {
  const htmlString = `
    <table border="1">
      <tr><th>产品</th><th>价格</th></tr>
      <tr><td>笔记本</td><td>5000</td></tr>
    </table>
  `;
  const blob = asBlob(htmlString);
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "产品列表.docx";
  link.click();
};

function App() {
  return <button onClick={exportAsWord}>导出为 Word</button>;
}

使用 office-ui-fabric-react 组件库

微软官方提供的 office-ui-fabric-react 包含专门用于 Office 集成的组件，支持表格的渲染和导出功能。

安装依赖：

npm install @fluentui/react

示例代码：

import { DetailsList, IColumn } from "@fluentui/react";
import { WordExport } from "@fluentui/react-excel-export";

const columns: IColumn[] = [
  { key: "name", name: "名称", fieldName: "name", minWidth: 100 },
  { key: "value", name: "数值", fieldName: "value", minWidth: 100 },
];

const items = [
  { name: "项目A", value: 100 },
  { name: "项目B", value: 200 },
];

const exportToWord = () => {
  WordExport.exportDetailsListToWord("导出数据", columns, items);
};

function App() {
  return (
    <>
      <DetailsList items={items} columns={columns} />
      <button onClick={exportToWord}>导出到 Word</button>
    </>
  );
}

服务端生成方案

对于复杂表格或需要后端处理的场景，可以通过 API 调用服务端生成 Word 文件。常用服务端库包括：

• Python: python-docx
• Java: Apache POI
• Node.js: docx 或 officegen

前端调用示例：

const fetchWordDocument = async () => {
  const response = await fetch("/api/generate-word");
  const blob = await response.blob();
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "server-generated.docx";
  link.click();
};

样式自定义建议

1. 表格边框样式可通过 TableCell 的 borders 属性配置
2. 合并单元格需要使用 rowSpan 和 gridSpan 参数
3. 字体和颜色通过 Paragraph 的 style 属性设置
4. 表格宽度建议使用 WidthType.DXA 单位（1/20磅）

典型样式配置示例：

new TableCell({
  children: [new Paragraph("内容")],
  borders: { top: { style: "single", size: 4, color: "000000" } },
  shading: { fill: "FF0000" },
  width: { size: 3000, type: WidthType.DXA },
})