表格是 Word 文档中组织和展示数据的核心元素，合理的表格排版直接影响文档的可读性与专业性。Spire.Doc for JavaScript 基于 WebAssembly 在浏览器端直接完成表格的自动调整操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍三个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.Doc for JavaScript。以下示例默认已安装 Spire.Doc 并完成 WebAssembly 模块初始化。
根据内容自动调整表格
根据内容自动调整表格的核心流程分为三个阶段：首先通过 FetchFileToVFS 将字体文件和目标文档载入 WASM 虚拟文件系统；然后实例化 Document 加载文档，获取目标表格后调用 AutoFit 方法并传入 AutoFitToContents 参数；最后保存文档并从 VFS 读取生成的文件，封装为 Blob 后触发浏览器下载。
function App() {
const autoFitToContents = 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/`);
const inputFileName = 'TableSample.docx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);
// 加载文档
const doc = new docModule.Document();
doc.LoadFromFile(inputFileName);
// 获取第一个节中的第一个表格
let section = doc.Sections.get_Item(0);
let table = section.Tables.get_Item(0);
// 根据单元格内容自动调整列宽
table.AutoFit(docModule.AutoFitBehaviorType.AutoFitToContents);
// 定义输出文件名
const outputFileName = "AutoFitToContents_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>自动适应内容。</h1>
<button onClick={autoFitToContents}>
Generate
</button>
</div>
);
}
export default App;
通过 AutoFitToContents 模式调整后，表格各列的宽度会根据单元格内实际内容的长度自动收缩，使表格紧凑且无多余空白。
根据窗口自动调整表格
根据窗口自动调整表格可以让表格宽度自适应页面宽度，适合需要表格撑满页面宽度的场景。
function App() {
const autoFitToWindow = 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/`);
const inputFileName = 'TableSample.docx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);
// 加载文档
const doc = new docModule.Document();
doc.LoadFromFile(inputFileName);
// 获取第一个节中的第一个表格
let section = doc.Sections.get_Item(0);
let table = section.Tables.get_Item(0);
// 根据页面宽度自动调整表格
table.AutoFit(docModule.AutoFitBehaviorType.AutoFitToWindow);
// 定义输出文件名
const outputFileName = "AutoFitToWindow_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>自动适应窗口。</h1>
<button onClick={autoFitToWindow}>
Generate
</button>
</div>
);
}
export default App;
通过 AutoFitToWindow 模式调整后，表格宽度会扩展至与页面宽度一致，各列按比例均匀分布。
固定列宽
当表格已有精心设计的列宽，不希望因内容增减而发生变化时，可以使用固定列宽模式，禁止 Word 自动调整列的大小。
function App() {
const fixedColumnWidths = 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/`);
const inputFileName = 'TableSample.docx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);
// 加载文档
const doc = new docModule.Document();
doc.LoadFromFile(inputFileName);
// 获取第一个节中的第一个表格
let section = doc.Sections.get_Item(0);
let table = section.Tables.get_Item(0);
// 固定表格列宽，禁止自动调整
table.AutoFit(docModule.AutoFitBehaviorType.FixedColumnWidths);
// 定义输出文件名
const outputFileName = "FixedColumnWidths_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>固定列宽。</h1>
<button onClick={fixedColumnWidths}>
Generate
</button>
</div>
);
}
export default App;
使用固定列宽模式后，无论单元格内容如何变化，表格的列宽都会保持原有尺寸，确保排版的一致性。
常见问题
AutoFit 方法调用后表格排版未发生变化
原因：调用 AutoFit 方法时传入的参数类型不正确，或者表格被锁定不允许调整布局。
解决：确保使用正确的 AutoFitBehaviorType 枚举值：
// 根据内容调整
table.AutoFit(docModule.AutoFitBehaviorType.AutoFitToContents);
// 根据窗口调整
table.AutoFit(docModule.AutoFitBehaviorType.AutoFitToWindow);
// 固定列宽
table.AutoFit(docModule.AutoFitBehaviorType.FixedColumnWidths);
获取表格时提示索引越界
原因：文档中不存在指定索引的节或表格，通常是因为索引从 0 开始但文档中实际没有对应的对象。
解决：先检查节和表格的数量，再访问对应索引：
if (document.Sections.Count > 0 && document.Sections.get_Item(0).Tables.Count > 0) {
let section = document.Sections.get_Item(0);
let table = section.Tables.get_Item(0);
table.AutoFit(docModule.AutoFitBehaviorType.AutoFitToContents);
}
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
