为单元格区域设置格式时，同一组属性若逐个单元格处理，需要在每一列上重复设置，列数一多容易遗漏；而这些格式往往分散在字体、边框与对齐几处，逐项设置之后还要各自核对一遍。Spire.XLS 的做法是先把这一组格式保存为一份命名样式，再用一个开关对象指明本次要落下样式中的哪几项，最后将其应用到目标区域——未被勾选的属性不会一并应用，区域内原有的其它格式也保持不变。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成上述操作，通过虚拟文件系统（VFS）管理输出文件，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
将命名样式应用到单元格区域
逐个单元格设置格式时，同一段代码需要在每一列上重复，列数一多容易遗漏其中的单元格；而字体、边框与居中若要分别设置，同一块区域就要来回处理三遍。命名样式将这一组格式保存为可以反复取用的对象，开关对象则指明本次落下其中的哪几项，二者配合，一次即可把需要修改的部分应用到整块区域，区域内原有的其它格式不受影响。具体操作步骤如下：
- 将字体文件载入 VFS，新建工作簿并取得第一张工作表，写入表头与两行数据。
- 用
workbook.Styles.Add创建命名样式，并指定表头要用的字体颜色、字号与斜体。 - 在同一份样式上设置上下边框。
- 在同一份样式上设置水平与垂直居中。
- 用
new xlsModule.CellStyleFlag()创建开关对象，勾选本次要落下的各项；未勾选的项不会写进目标单元格。 - 用
sheet.Range.get('A1:E1').ApplyStyle(tableStyle, flag)把样式应用到表头区域；设置列宽使表头文字完整显示，再保存工作簿并释放资源。
以下为完整的代码示例，演示如何在 React 中给 Excel 的单元格区域应用样式：
function App() {
const applyStyleToRange = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 新建工作簿，取第一张工作表
const workbook = new xlsModule.Workbook();
const sheet = workbook.Worksheets.get(0);
// 写入表头与两行数据
const columns = ['A', 'B', 'C', 'D', 'E'];
const headers = ['产品', '规格', '数量', '单价', '金额'];
headers.forEach((text, index) => {
sheet.Range.get(`${columns[index]}1`).Value = text;
});
const rows = [
['蓝光迷你投影仪', '1080P / 8G', '6', '1299', '7794'],
['便携蓝牙音箱', '20W / IPX7', '12', '399', '4788'],
];
rows.forEach((row, rowIndex) => {
columns.forEach((column, columnIndex) => {
sheet.Range.get(`${column}${rowIndex + 2}`).Value = row[columnIndex];
});
});
// 创建一份命名样式
const tableStyle = workbook.Styles.Add('tableStyle');
// 指定表头要用的字体颜色、字号与斜体
tableStyle.Font.Color = xlsModule.Color.get_CornflowerBlue();
tableStyle.Font.Size = 16;
tableStyle.Font.IsItalic = true;
// 在同一份样式上设置上下边框
tableStyle.Borders.get(xlsModule.BordersLineType.EdgeTop).LineStyle = xlsModule.LineStyleType.Thin;
tableStyle.Borders.get(xlsModule.BordersLineType.EdgeBottom).LineStyle = xlsModule.LineStyleType.Thin;
// 并在同一份样式上设置水平与垂直居中
tableStyle.HorizontalAlignment = xlsModule.HorizontalAlignType.Center;
tableStyle.VerticalAlignment = xlsModule.VerticalAlignType.Center;
// 创建开关对象，勾选这次要落下的各项，未勾选的项不会写进目标单元格
const flag = new xlsModule.CellStyleFlag();
flag.FontColor = true;
flag.FontSize = true;
flag.FontItalic = true;
flag.Borders = true;
flag.HorizontalAlignment = true;
flag.VerticalAlignment = true;
// 把样式应用到表头区域
sheet.Range.get('A1:E1').ApplyStyle(tableStyle, flag);
// 设置列宽
sheet.Columns.get(0).ColumnWidth = 22;
sheet.Columns.get(1).ColumnWidth = 14;
// 将工作簿保存为 Excel 文件
const outputFileName = 'ApplyStyleToRange.xlsx';
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2016 });
// 释放 workbook 对象以释放资源
workbook.Dispose();
// 从 VFS 读取结果文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
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 id="apply-style-to-range" onClick={applyStyleToRange}>为单元格区域应用样式</button>
</div>
);
}
export default App;
运行后，为单元格区域应用样式的效果：
读取并调整命名样式
样式一经保存，后续要改的就只是其中的数值，不必重新写一遍各项格式，也不必重建工作簿，对已有的命名样式进行修改即可。需要注意，应用时写入单元格的是样式当时的各项属性，单元格不保留对样式的引用，调整之后需重新应用一次才会生效。具体操作步骤如下：
- 先运行功能点1 的代码，使结果文件
ApplyStyleToRange.xlsx留在 VFS 中，作为本次的输入文件。 - 用
workbook.LoadFromFile载入这份输入文件，并取得第一张工作表。 - 用
workbook.Styles.get('tableStyle')按名称读取功能点1 创建的命名样式，取它的Font.Size作为基准。 - 在基准字号上增加数值写回样式，作为数据区域要用的字号。
- 创建开关对象，只勾选字号、边框与居中；用
sheet.Range.get('A2:E3').ApplyStyle(readBack, flag)把调整过的样式应用到数据区域，设置列宽使放大后的字号完整显示，再保存工作簿并释放资源。
以下为完整的代码示例，演示如何在 React 中载入结果文件、读取命名样式并调整后应用到单元格区域：
function App() {
const readAndAdjustFontStyle = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
// 载入功能点1 生成的结果文件，作为本次的输入文件
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: 'ApplyStyleToRange.xlsx' });
const sheet = workbook.Worksheets.get(0);
// 按名字读取功能点1 创建的命名样式，取它当前的字号作为基准
const readBack = workbook.Styles.get('tableStyle');
const baseSize = readBack.Font.Size;
// 在基准字号上加大，作为数据区域要用的字号
readBack.Font.Size = baseSize + 4;
// 创建开关对象：这次只勾字号、边框与居中，样式里的颜色与斜体不落到数据区域
const flag = new xlsModule.CellStyleFlag();
flag.FontSize = true;
flag.Borders = true;
flag.HorizontalAlignment = true;
flag.VerticalAlignment = true;
// 把调整过的样式应用到数据区域
sheet.Range.get('A2:E3').ApplyStyle(readBack, flag);
// 设置列宽，放大后的字号也要能完整显示
sheet.Columns.get(0).ColumnWidth = 30;
sheet.Columns.get(1).ColumnWidth = 20;
// 将工作簿保存为 Excel 文件
const outputFileName = 'ReadAndAdjustFontStyle.xlsx';
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2016 });
// 释放 workbook 对象以释放资源
workbook.Dispose();
// 从 VFS 读取结果文件，触发下载
const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
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 id="read-and-adjust-font-style" onClick={readAndAdjustFontStyle}>读取命名样式并调整后应用</button>
</div>
);
}
export default App;
运行后，读取命名样式并调整字号的效果：
常见问题
应用样式后，区域内原有的数字格式会变吗
原因：不会。开关对象中勾选了哪些项，应用时也只会把这些项写入目标单元格；未被勾选的项不参与，单元格上原有的数字格式、边框与对齐均保持原样。
解决：反之，若需连同数字格式一并应用，可把数字格式也设置到样式上，并在开关中勾选对应的项：
// 样式里先把数字格式设好
tableStyle.NumberFormat = '0.00';
// 开关里勾上对应的项
flag.NumberFormat = true;
sheet.Range.get('A1:E1').ApplyStyle(tableStyle, flag);
如何把样式应用到整张工作表
原因：以上示例均按区域逐个应用；若整张工作表也照此处理，则需要逐一列出待覆盖的区域。工作表对象上存在同名方法，一次即可覆盖整张表。
解决：改为对工作表对象调用 ApplyStyle，将样式整份应用到整张表：
sheet.ApplyStyle(tableStyle);
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
