在 Word 文档中创建表格是日常办公开发中最常见的需求之一，无论是数据报表、产品清单还是统计分析，表格都能以结构化的方式清晰呈现信息。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成 Word 文档的创建与编辑，通过虚拟文件系统（VFS）管理字体和文件资源，无需后端服务支持。
本文介绍三个核心功能点：
有关安装和项目配置，请参考 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 天的临时许可证。
