在 Word 文档中创建表格是日常办公开发中最常见的需求之一，无论是数据报表、产品清单还是统计分析，表格都能以结构化的方式清晰呈现信息。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成 Word 文档的创建与编辑，通过虚拟文件系统（VFS）管理字体和文件资源，无需后端服务支持。

本文介绍三个核心功能点：

• 创建带格式的数据表格
• 通过 HTML 创建表格
• 创建嵌套表格

有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。

创建带格式的数据表格

在实际开发中，最常见的场景是将后端返回的数据以表格形式写入 Word 文档。核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件载入 WASM 虚拟文件系统；然后实例化 Document 创建文档，通过 AddTable 添加表格并填充数据，设置表头、对齐方式、交替行颜色等格式；最后将文档保存并从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。

function addTable(section) {
  let docModule = window.wasmModule.spiredoc;
  let header = ["名称", "首都", "大洲", "面积", "人口"];
  let data =
  [
    ["阿根廷", "布宜诺斯艾利斯", "南美洲", "2777815", "32300003"],
    ["玻利维亚", "拉巴斯", "南美洲", "1098575", "7300000"],
    ["巴西", "巴西利亚", "南美洲", "8511196", "150400000"],
    ["加拿大", "渥太华", "北美洲", "9976147", "26500000"],
    ["智利", "圣地亚哥", "南美洲", "756943", "13200000"],
    ["哥伦比亚", "波哥大", "南美洲", "1138907", "33000000"],
    ["古巴", "哈瓦那", "北美洲", "114524", "10600000"],
    ["厄瓜多尔", "基多", "南美洲", "455502", "10600000"],
    ["萨尔瓦多", "圣萨尔瓦多", "北美洲", "20865", "5300000"],
    ["圭亚那", "乔治敦", "南美洲", "214969", "800000"],
    ["牙买加", "金斯敦", "北美洲", "11424", "2500000"],
    ["墨西哥", "墨西哥城", "北美洲", "1967180", "88600000"],
    ["尼加拉瓜", "马那瓜", "北美洲", "139000", "3900000"],
    ["巴拉圭", "亚松森", "南美洲", "406576", "4660000"],
    ["秘鲁", "利马", "南美洲", "1285215", "21600000"],
    ["美利坚合众国", "华盛顿", "北美洲", "9363130", "249200000"],
    ["乌拉圭", "蒙得维的亚", "南美洲", "176140", "3002000"],
    ["委内瑞拉", "加拉加斯", "南美洲", "912047", "19700000"]
  ];
  let table = section.AddTable({ showBorder: true });
  table.ResetCells(data.length + 1, header.length);

  // 设置表头行
  let row = table.Rows.get_Item(0);
  row.IsHeader = true;
  row.Height = 20;
  row.HeightType = docModule.TableRowHeightType.Exactly;
  for (let i = 0; i < row.Cells.Count; i++) {
    row.Cells.get_Item(i).CellFormat.Shading.BackgroundPatternColor = docModule.Color.get_Gray();
  }

  for (let i = 0; i < header.length; i++) {
    row.Cells.get_Item(i).CellFormat.VerticalAlignment = docModule.VerticalAlignment.Middle;
    let p = row.Cells.get_Item(i).AddParagraph();
    p.Format.HorizontalAlignment = docModule.HorizontalAlignment.Center;
    let txtRange = p.AppendText(header[i]);
    txtRange.CharacterFormat.Bold = true;
  }

  // 填充数据行并设置交替行颜色
  for (let r = 0; r < data.length; r++) {
    let dataRow = table.Rows.get_Item(r + 1);
    dataRow.Height = 20;
    dataRow.HeightType = docModule.TableRowHeightType.Exactly;
    for (let i = 0; i < dataRow.Cells.Count; i++) {
      dataRow.Cells.get_Item(i).CellFormat.Shading.BackgroundPatternColor = docModule.Color.Empty();
    }
    for (let c = 0; c < data[r].length; c++) {
      dataRow.Cells.get_Item(c).CellFormat.VerticalAlignment = docModule.VerticalAlignment.Middle;
      dataRow.Cells.get_Item(c).AddParagraph().AppendText(data[r][c]);
    }
  }

  // 偶数行设置浅蓝色背景
  for (let j = 1; j < table.Rows.Count; j++) {
    if (j % 2 == 0) {
      let row2 = table.Rows.get_Item(j);
      for (let f = 0; f < row2.Cells.Count; f++) {
        row2.Cells.get_Item(f).CellFormat.Shading.BackgroundPatternColor = docModule.Color.get_LightBlue();
      }
    }
  }
}

function App() {
  const CreateTable = async () => {
    // 获取 Spire.Doc WASM 模块
    const docModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将字体和文档文件载入 VFS
    await window.spire.FetchFileToVFS('ARIALUNI.TTF', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
 
    // 创建空白文档
    let doc = new docModule.Document();
    let section = doc.AddSection();

    // 添加表格
    addTable(section);

    // 定义输出文件名
    const outputFileName = "CreateTable_output.docx";

    // 保存文档
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });

    // 释放资源
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>点击以下按钮在 Word 文档中创建表格。</h1>
      <button onClick={CreateTable}>
        Generate
      </button>
    </div>
  );
}

export default App;

上述代码创建了一个包含 18 行国家数据的表格，表头使用灰色背景和加粗字体居中对齐，数据区域使用交替行颜色（偶数行浅蓝背景）提升可读性，生成的 Word 文档效果如下：

通过 HTML 创建表格

在 Web 开发中，HTML 表格是展示数据的通用格式。Spire.Doc 提供了 AppendHTML 方法，可以直接将 HTML 字符串解析为 Word 文档中的表格，极大简化了从 Web 内容到 Word 文档的转换流程。这对于需要将网页上的表格数据导出为 Word 文档的场景尤为实用。

function App() {
  const CreateTableFromHTML = async () => {
    // 获取 Spire.Doc WASM 模块
    const docModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将字体和文档文件载入 VFS
    await window.spire.FetchFileToVFS('msyh.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
 
    // HTML 字符串
    let HTML = "<table border='2px'>" +
      "<tr>" +
      "<td>第1行，第1列</td>" +
      "<td>第1行，第2列</td>" +
      "</tr>" +
      "<tr>" +
      "<td>第2行，第1列</td>" +
      "<td>第2行，第2列</td>" +
      "</tr>" +
      "</table>";

    // 创建 Word 文档
    let doc = new docModule.Document();

    // 添加节
    let section = doc.AddSection();

    // 添加段落并追加 HTML 字符串
    section.AddParagraph().AppendHTML(HTML);

    // 定义输出文件名
    const outputFileName = "CreateTableFromHTML_output.docx";

    // 保存文档
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });

    // 释放资源
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>点击以下按钮，使用 HTML 在 Word 文档中创建表格。</h1>
      <button onClick={CreateTableFromHTML}>
        Generate
      </button>
    </div>
  );
}

export default App;

通过 AppendHTML 转换后生成的 Word 表格完美保留了 HTML 中定义的边框样式和单元格结构：

创建嵌套表格

嵌套表格是指在一个表格的单元格中再插入一个子表格，常用于实现复杂的文档布局，例如在产品目录中，主表格展示产品名称和描述，描述单元格内再嵌入一个包含规格参数（编号、项目、价格）的子表格。Spire.Doc 通过 Cell.AddTable 方法轻松实现嵌套表格的创建。

function App() {
  const CreateNestedTable = async () => {
    // 获取 Spire.Doc WASM 模块
    const docModule = window.wasmModule?.spiredoc;

    // 检查模块是否就绪
    if (!docModule) {
      alert('Spire.Doc is not ready yet');
      return;
    }

    // 将字体和文档文件载入 VFS
    await window.spire.FetchFileToVFS('msyh.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
 
    // 创建新文档
    let doc = new docModule.Document();
    let section = doc.AddSection();

    // 添加主表格（2行2列）
    let table = section.AddTable({ showBorder: true });
    table.ResetCells(1, 2);

    // 设置列宽
    table.Rows.get_Item(0).Cells.get_Item(0).SetCellWidth(70, docModule.CellWidthType.Point);
    table.Rows.get_Item(0).Cells.get_Item(1).SetCellWidth(150, docModule.CellWidthType.Point);
    table.Rows.get_Item(0).Height=150;
    table.AutoFit(docModule.AutoFitBehaviorType.AutoFitToWindow);

    // 向单元格插入内容
    table.Rows.get_Item(0).Cells.get_Item(0).AddParagraph().AppendText("Spire.Doc for JavaScript");
    let text = "Spire.Doc for JavaScript 是一个专业的 Word " +
      "JavaScript 库，专为开发人员设计，可在任何 JavaScript " +
      "平台上快速、高质量地创建、读取、写入、转换和打印 Word 文档文件。";
    table.Rows.get_Item(0).Cells.get_Item(1).AddParagraph().AppendText(text);
    
    table.Rows.get_Item(0).Cells.get_Item(1).AddParagraph();

    // 在（第一行第二列）单元格中添加嵌套表格
    let nestedTable = table.Rows.get_Item(0).Cells.get_Item(1).AddTable({ showBorder: true });
    nestedTable.ResetCells(5, 2);
    nestedTable.AutoFit(docModule.AutoFitBehaviorType.AutoFitToContents);

    // 填充嵌套表格内容
    nestedTable.Rows.get_Item(0).Cells.get_Item(0).AddParagraph().AppendText("功能模块");
    nestedTable.Rows.get_Item(0).Cells.get_Item(1).AddParagraph().AppendText("典型应用场景");

    nestedTable.Rows.get_Item(1).Cells.get_Item(0).AddParagraph().AppendText("文档生成");
    nestedTable.Rows.get_Item(2).Cells.get_Item(0).AddParagraph().AppendText("格式转换");
    nestedTable.Rows.get_Item(3).Cells.get_Item(0).AddParagraph().AppendText("内容编辑");
    nestedTable.Rows.get_Item(4).Cells.get_Item(0).AddParagraph().AppendText("打印服务");

    nestedTable.Rows.get_Item(1).Cells.get_Item(1).AddParagraph().AppendText("动态生成合同、发票、数据报告及邮件合并");
    nestedTable.Rows.get_Item(2).Cells.get_Item(1).AddParagraph().AppendText("Word 与 PDF、HTML、RTF、XML、图片等格式互转");
    nestedTable.Rows.get_Item(3).Cells.get_Item(1).AddParagraph().AppendText("提取文本/图片、添加水印、修订追踪与表单填写");
    nestedTable.Rows.get_Item(4).Cells.get_Item(1).AddParagraph().AppendText("后台静默打印、自定义纸张与页面设置");

    // 定义输出文件名
    const outputFileName = "CreateNestedTable_output.docx";

    // 保存文档
    doc.SaveToFile({ fileName: outputFileName, fileFormat: docModule.FileFormat.Docx2013 });

    // 释放资源
    doc.Dispose();

    // 从 VFS 读取生成的文件，触发下载
    const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([modifiedFileArray], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>点击以下按钮，即可在 Word 文档中创建嵌套表格。</h1>
      <button onClick={CreateNestedTable}>
        Generate
      </button>
    </div>
  );
}

export default App;

嵌套表格生成的效果：主表格左侧显示产品名称，右侧的描述单元格内嵌了一个包含编号、项目和价格的规格明细表：

常见问题

下载的文件无法打开或提示损坏

原因：创建 Blob 时 MIME 类型设置错误，浏览器无法正确识别文件格式。

解决：确保使用准确的 Word 文档 MIME 类型：

const modifiedFile = new Blob([fileArray], {
  type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});

表格边框不显示或样式不一致

原因：通过 AddTable({ showBorder: true }) 添加表格时边框默认启用，但通过 Table 构造函数直接创建的表格需要手动设置边框样式。

解决：使用构造函数创建表格时，显式设置边框类型：

let table = new docModule.Table(doc, false);
table.Format.Borders.BorderType = docModule.BorderStyle.Single;

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。