报表里的表头和汇总行如果只有数据和边框，翻看起来并不容易一眼定位。给这些单元格加上底色是最常见的做法，但纯色填充能表达的层次有限：有时需要一道由浅到深的过渡来提示重点，有时需要一层网点或斜纹底纹来区分普通行与汇总行，同时又不至于盖住单元格里的数字。Spire.XLS for JavaScript 通过 Interior 对象同时支持渐变填充与图案填充，基于 WebAssembly 在浏览器端直接完成上述操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍两个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
为单元格添加渐变填充
渐变填充由三步组成：先把填充类型指定为渐变，再给出两端的颜色，最后说明过渡的方向与变化方式。这三步都落在同一个 Interior 对象上——FillPattern 决定填充类型，Gradient.ForeColor 与 Gradient.BackColor 给出两端颜色，Gradient.TwoColorGradient 接收两个参数：方向取自 GradientStyleType，横向、纵向、两个斜向以及自中心、自角落向外辐散都在这一个枚举里；明暗变体取自 GradientVariantsType，取值是 ShadingVariants1 到 ShadingVariants4。同一组颜色，换个方向与变体就是完全不同的观感。具体操作步骤如下：
- 将字体与测试数据载入 VFS。
- 新建
Workbook，用LoadFromFile载入工作簿，再用Worksheets.get(0)取得第一个工作表。 - 用
Range.get取到表头区域，把Style.Interior.FillPattern设为ExcelPatternType.Gradient。 - 用
Gradient.ForeColor与Gradient.BackColor指定渐变的两端颜色。 - 用
Gradient.TwoColorGradient指定渐变方向与明暗变体。 - 以
SaveToFile保存工作簿。
以下为完整的代码示例，演示如何在 React 中为 Excel 单元格添加渐变填充：
function App() {
const applyGradient = 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 inputFileName = 'FillSample.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 载入工作簿，取第一个工作表
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
const sheet = workbook.Worksheets.get(0);
// 取表头区域 A1:E1
const header = sheet.Range.get('A1:E1');
// 将填充类型指定为渐变
header.Style.Interior.FillPattern = xlsModule.ExcelPatternType.Gradient;
// 指定渐变的两端颜色
header.Style.Interior.Gradient.ForeColor = xlsModule.Color.FromArgb(255, 255, 255);
header.Style.Interior.Gradient.BackColor = xlsModule.Color.FromArgb(79, 129, 189);
// 双色渐变：第一个参数决定渐变方向，第二个参数决定明暗变体
header.Style.Interior.Gradient.TwoColorGradient(
xlsModule.GradientStyleType.Horizontal,
xlsModule.GradientVariantsType.ShadingVariants1,
);
// 保存工作簿
const outputFileName = 'GradientFill.xlsx';
workbook.SaveToFile({ fileName: outputFileName });
// 释放 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 onClick={applyGradient}>Start</button>
</div>
);
}
export default App;
运行后，为表头添加渐变填充的效果：
为单元格添加图案填充
图案填充不是一种单一效果，而是一组内置样式的总称：网点、横纹、竖纹、斜纹、棋盘格等都归在 ExcelPatternType 之下，取值有几十种，密度从 5% 到 75% 不等。与渐变填充相比，图案填充占用的视觉重量更轻，铺在整行数据上也不会干扰阅读，因此更适合用来标记汇总行或需要区分的数据段。
设置方式与渐变同源：Interior.FillPattern 选定图案样式后，再给出两种颜色。此处有一处容易写反的地方——Interior.Color 决定的是图案线本身的颜色，Interior.PatternColor 决定的则是铺在下面的底色，属性名与实际作用正好相反。把深色交给 Interior.Color、浅色交给 Interior.PatternColor，网点才会浮在浅底之上。具体操作步骤如下：
- 将字体与测试数据载入 VFS。
- 新建
Workbook，用LoadFromFile载入工作簿，再用Worksheets.get(0)取得第一个工作表。 - 用
Range.get取到汇总行区域，把Style.Interior.FillPattern设为所需的ExcelPatternType取值。 - 用
Interior.Color指定图案线的颜色，用Interior.PatternColor指定底色。 - 以
SaveToFile保存工作簿。
以下为完整的代码示例，演示如何在 React 中为 Excel 单元格添加图案填充：
function App() {
const applyPattern = 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 inputFileName = 'FillSample.xlsx';
await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}data/`);
// 载入工作簿，取第一个工作表
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: inputFileName });
const sheet = workbook.Worksheets.get(0);
// 取汇总行区域 A5:E5
const total = sheet.Range.get('A5:E5');
// 选定内置图案样式，这里用 12.5% 灰度网点
total.Style.Interior.FillPattern = xlsModule.ExcelPatternType.Percent125Gray;
// Interior.Color 决定图案线本身的颜色，Interior.PatternColor 决定铺在下面的底色
total.Style.Interior.Color = xlsModule.Color.FromArgb(192, 80, 77);
total.Style.Interior.PatternColor = xlsModule.Color.FromArgb(255, 242, 204);
// 保存工作簿
const outputFileName = 'PatternFill.xlsx';
workbook.SaveToFile({ fileName: outputFileName });
// 释放 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 onClick={applyPattern}>Start</button>
</div>
);
}
export default App;
运行后，为汇总行添加图案填充的效果：
常见问题
填充色设好了，单元格里的字体样式为什么没跟着变？
原因：Style.Interior 只负责填充。填充、字体、边框是 Style 之下三个彼此独立的成员，改动其中一个不会波及另外两个——底色刷深了字还是原来的黑色，自然就糊成一片；反过来给 Style.Font 换了颜色，底色也不会跟着动。
解决：填充与字体分开设置，需要对比度时两处一起调：
// 填充
sheet.Range.get('A1:E1').Style.Interior.Color = xlsModule.Color.FromArgb(79, 129, 189);
// 字体
sheet.Range.get('A1:E1').Style.Font.Color = xlsModule.Color.FromArgb(255, 255, 255);
sheet.Range.get('A1:E1').Style.Font.IsBold = true;
Style.Font 下还有 FontName、Size、IsItalic、Underline 等属性，与填充互不干涉。
填充之后想把颜色去掉，怎么恢复成无填充？
原因：换一种颜色只是换了一种填充，并不会把填充去掉——填充类型仍是非 None 的取值，图案或底色依旧写在单元格的样式里。
解决：把填充类型设回 ExcelPatternType.None，原有的图案与配色一并失效：
sheet.Range.get('A5:E5').Style.Interior.FillPattern = xlsModule.ExcelPatternType.None;
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
