在销售报表、成绩单或指标看板中，数值的横向对比往往比数值本身更重要。若为每一列都插入图表，工作表会显得拥挤；而数据条、色阶与图标集可以在不占用额外行列的前提下，用条形长度、颜色深浅和图标形态，把单元格中的数值大小直接呈现出来。这三者同属 Excel 的条件格式（Conditional Formatting），在 Excel 界面中位于「开始 → 条件格式」之下。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成上述操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍三个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
在单元格区域中应用数据条
数据条在单元格内绘制一条水平色带，色带长度与该单元格数值在所选区域内的相对大小成正比。Spire.XLS for JavaScript 通过 ConditionalFormats.Add 创建条件格式集合，用 AddRange 指定作用区域，再用 AddCondition 取得条件对象；将 FormatType 设为 ConditionalFormatType.DataBar 即可生成数据条，条形颜色由 DataBar.BarColor 控制。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得工作表。
- 用
ConditionalFormats.Add新增条件格式，并通过AddRange绑定数据区域。 - 通过
AddCondition添加条件，将FormatType设为DataBar，并设置条形颜色。 - 保存工作簿。
以下为完整的代码示例，演示如何在 React 中为销量数据应用数据条：
function App() {
const applyDataBars = 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 = 'SalesData.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);
// 选中需要应用数据条的数据区域
const dataRange = sheet.Range.get("B2:E9");
// 新增条件格式，并将其绑定到该区域
const xcfs = sheet.ConditionalFormats.Add();
xcfs.AddRange(dataRange);
// 添加数据条条件，设置条形颜色
const format = xcfs.AddCondition();
format.FormatType = xlsModule.ConditionalFormatType.DataBar;
format.DataBar.BarColor = xlsModule.Color.get_CadetBlue();
// 保存工作簿
const outputFileName = "ApplyDataBars.xlsx";
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });
// 释放 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={applyDataBars}>Start</button>
</div>
);
}
export default App;
运行后，在单元格区域中应用数据条的效果：
在单元格区域中应用色阶
色阶用颜色的深浅表示数值的高低：单元格的数值在整个区域中越大，取到的颜色越靠近刻度的高端。与数据条相同，色阶同样由 ConditionalFormats 添加，区别仅在于将 FormatType 设为 ConditionalFormatType.ColorScale；未指定颜色时生成的是双色刻度，区域最小值取橙色，最大值取浅黄色，中间数值按比例在两端之间过渡。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得工作表。
- 用
ConditionalFormats.Add新增条件格式，并通过AddRange绑定数据区域。 - 通过
AddCondition添加条件，并将FormatType设为ColorScale。 - 保存工作簿。
以下为完整的代码示例，演示如何在 React 中为销量数据应用色阶：
function App() {
const applyColorScales = 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 = 'SalesData.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);
// 选中需要应用色阶的数据区域
const dataRange = sheet.Range.get("B2:E9");
// 新增条件格式，并将其绑定到该区域
const xcfs = sheet.ConditionalFormats.Add();
xcfs.AddRange(dataRange);
// 添加色阶条件，颜色按数值高低自动过渡
const format = xcfs.AddCondition();
format.FormatType = xlsModule.ConditionalFormatType.ColorScale;
// 保存工作簿
const outputFileName = "ApplyColorScales.xlsx";
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });
// 释放 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={applyColorScales}>Start</button>
</div>
);
}
export default App;
运行后，在单元格区域中应用色阶的效果：
在单元格区域中应用图标集
图标集依照数值所在的区间，在单元格中显示不同的图标，例如用红、黄、绿三色交通灯标记低、中、高三档。使用的仍是同一套 API：将 FormatType 设为 ConditionalFormatType.IconSet，再通过 IconSet.IconSetType 选定图标样式；示例采用 IconSetType.ThreeTrafficLights1（三色交通灯）。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得工作表。
- 用
ConditionalFormats.Add新增条件格式，并通过AddRange绑定数据区域。 - 通过
AddCondition添加条件，将FormatType设为IconSet，并指定图标集类型。 - 保存工作簿。
以下为完整的代码示例，演示如何在 React 中为销量数据应用图标集：
function App() {
const applyIconSets = 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 = 'SalesData.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);
// 选中需要应用图标集的数据区域
const dataRange = sheet.Range.get("B2:E9");
// 新增条件格式，并将其绑定到该区域
const xcfs = sheet.ConditionalFormats.Add();
xcfs.AddRange(dataRange);
// 添加图标集条件，图标样式设为三色交通灯
const format = xcfs.AddCondition();
format.FormatType = xlsModule.ConditionalFormatType.IconSet;
format.IconSet.IconSetType = xlsModule.IconSetType.ThreeTrafficLights1;
// 保存工作簿
const outputFileName = "ApplyIconSets.xlsx";
workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });
// 释放 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={applyIconSets}>Start</button>
</div>
);
}
export default App;
图标集按区域内的取值区间划分档次，因此同一个图标在不同区域中对应的数值范围并不相同。
运行后，在单元格区域中应用图标集的效果：
常见问题
为什么作用区域中的文字单元格没有出现数据条？
原因：数据条表达的是数值在区域内的相对大小，因此只有数值单元格会被着色，区域中的文本单元格会被自动跳过。即使作用区域包含产品名称列或表头行，这些单元格也不会显示数据条，得到的仍是只覆盖数值区域的条形。
解决：这是预期行为，无需额外处理；把作用区域限定为数值区域即可。若连数值区域也没有出现数据条，则应检查 AddRange 传入的区域是否与数据实际所在的区域一致。
数据条的颜色和边框可以自定义吗？
原因：数据条的外观由条件对象的 DataBar 属性控制。条形填充色通过 DataBar.BarColor 指定；若只设置 FormatType 而不设置 BarColor，得到的是默认的蓝色数据条。数据条默认没有边框，直接设置 BarBorder.Color 不会生效。
解决：先通过 DataBar.BarBorder.Type 指定边框类型，再设置边框颜色，两者需配合使用：
// 先指定边框类型，边框颜色才会生效
format.DataBar.BarBorder.Type = xlsModule.DataBarBorderType.DataBarBorderSolid;
format.DataBar.BarBorder.Color = xlsModule.Color.get_Red();
// 条形填充色
format.DataBar.BarColor = xlsModule.Color.get_GreenYellow();
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
