人工检查一张几百行的表，找出重复录入的编号、偏离平均水平的评分、金额最高或最低的几笔订单，既费时又容易看漏。条件格式把这类判断交给 Excel 自己完成：规则一旦写好，符合条件的单元格会自动带上颜色，数据变动后标记也随之更新。本文聚焦其中三类最常用的判断——重复与否、高于或低于平均值、排名前后。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成上述操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍三个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
高亮重复值与唯一值
条件格式的规则挂在「条件格式集合」上：先由 sheet.ConditionalFormats.Add() 取得一组规则，再指定它作用的单元格区域，最后新建一条条件并设置颜色。重复值与唯一值是同一批数据的两面——前者命中在区域内出现不止一次的单元格，后者命中只出现一次的单元格，因此通常会写成一进一出的两条规则，让重复的编号与只出现一次的编号同时显形。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得工作表。
- 用
sheet.ConditionalFormats.Add()添加一组条件格式，用AddRange把区域指向订单编号列。 - 用
AddCondition新建条件，把FormatType设为DuplicateValues，并设置填充色。 - 在同一区域上按同样方式再建一组，判定类型改为
UniqueValues，设置另一种填充色，保存工作簿。
以下为完整的代码示例，演示如何在 React 中高亮重复值与唯一值：
function App() {
const highlightDuplicateValues = 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 = 'ConditionalFormatData.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 duplicateFormats = sheet.ConditionalFormats.Add();
duplicateFormats.AddRange(sheet.Range.get("C2:C10"));
// 新建重复值条件，用印度红填充出现不止一次的编号
const duplicateCondition = duplicateFormats.AddCondition();
duplicateCondition.FormatType = xlsModule.ConditionalFormatType.DuplicateValues;
duplicateCondition.BackColor = xlsModule.Color.get_IndianRed();
// 再添加一组条件格式，作用于同一区域
const uniqueFormats = sheet.ConditionalFormats.Add();
uniqueFormats.AddRange(sheet.Range.get("C2:C10"));
// 新建唯一值条件，用黄色填充只出现一次的编号
const uniqueCondition = uniqueFormats.AddCondition();
uniqueCondition.FormatType = xlsModule.ConditionalFormatType.UniqueValues;
uniqueCondition.BackColor = xlsModule.Color.get_Yellow();
// 保存工作簿
const outputFileName = "HighlightDuplicateValues.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={highlightDuplicateValues}>Start</button>
</div>
);
}
export default App;
运行后，高亮重复值与唯一值的效果：
高亮高于或低于平均值的数据
平均值是评价一组数据时最常用的参照。条件格式提供了专门的平均值条件：调用 AddAverageCondition 指定高于平均或低于平均，Excel 便会自行算出区域的平均值，再逐格与之比较，高于平均的标一种颜色，低于平均的标另一种。平均值由 Excel 在打开文件时实时计算，区域中的数据改动后，标记的分布也会随之变化。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得工作表。
- 用
sheet.ConditionalFormats.Add()添加一组条件格式，用AddRange把区域指向客户评分列。 - 用
AddAverageCondition传入AverageType.Below新建低于平均值条件，设置填充色。 - 在同一区域上按同样方式再建一组，改传
AverageType.Above新建高于平均值条件，设置另一种填充色，保存工作簿。
以下为完整的代码示例，演示如何在 React 中高亮高于或低于平均值的数据：
function App() {
const highlightAverageValues = 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 = 'ConditionalFormatData.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 belowFormats = sheet.ConditionalFormats.Add();
belowFormats.AddRange(sheet.Range.get("E2:E10"));
// 新建低于平均值条件，用天蓝色填充
const belowCondition = belowFormats.AddAverageCondition(xlsModule.AverageType.Below);
belowCondition.BackColor = xlsModule.Color.get_SkyBlue();
// 再添加一组条件格式，作用于同一区域
const aboveFormats = sheet.ConditionalFormats.Add();
aboveFormats.AddRange(sheet.Range.get("E2:E10"));
// 新建高于平均值条件，用橙色填充
const aboveCondition = aboveFormats.AddAverageCondition(xlsModule.AverageType.Above);
aboveCondition.BackColor = xlsModule.Color.get_Orange();
// 保存工作簿
const outputFileName = "HighlightAverageValues.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={highlightAverageValues}>Start</button>
</div>
);
}
export default App;
运行后，高亮高于或低于平均值的数据的效果：
高亮排名靠前或靠后的数据
排行榜式的需求——挑出金额最高的两笔订单、找出完成率最低的三个班组——靠逐行比较很难完成，交给排名条件则只需给出名次数量。AddTopBottomCondition 在指定区域内按数值排出名次，命中排名靠前或靠后的那些单元格并标上颜色；它接收两个参数：一个决定取靠前还是靠后，另一个是取几名。名次只在这块区域内产生，与工作表上的其他数据无关。具体操作步骤如下：
- 将字体与测试数据文件载入 VFS。
- 加载工作簿并取得工作表。
- 用
sheet.ConditionalFormats.Add()添加一组条件格式，用AddRange把区域指向订单金额列。 - 用
AddTopBottomCondition传入TopBottomType.Top与名次数量 2，新建前 2 名条件并设置填充色。 - 在同一区域上按同样方式再建一组，改传
TopBottomType.Bottom，设置另一种填充色，保存工作簿。
以下为完整的代码示例，演示如何在 React 中高亮排名靠前或靠后的数据：
function App() {
const highlightRankedValues = 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 = 'ConditionalFormatData.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 topFormats = sheet.ConditionalFormats.Add();
topFormats.AddRange(sheet.Range.get("D2:D10"));
// 新建前 2 名条件，用红色填充金额最高的两笔订单
const topCondition = topFormats.AddTopBottomCondition(xlsModule.TopBottomType.Top, 2);
topCondition.FormatType = xlsModule.ConditionalFormatType.TopBottom;
topCondition.BackColor = xlsModule.Color.get_Red();
// 再添加一组条件格式，作用于同一区域
const bottomFormats = sheet.ConditionalFormats.Add();
bottomFormats.AddRange(sheet.Range.get("D2:D10"));
// 新建后 2 名条件，用森林绿填充金额最低的两笔订单
const bottomCondition = bottomFormats.AddTopBottomCondition(xlsModule.TopBottomType.Bottom, 2);
bottomCondition.FormatType = xlsModule.ConditionalFormatType.TopBottom;
bottomCondition.BackColor = xlsModule.Color.get_ForestGreen();
// 保存工作簿
const outputFileName = "HighlightRankedValues.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={highlightRankedValues}>Start</button>
</div>
);
}
export default App;
运行后，高亮排名靠前或靠后的数据的效果：
常见问题
为什么设置的颜色没有生效？
原因：颜色要设置在条件对象上，而条件对象由 AddCondition、AddAverageCondition 或 AddTopBottomCondition 返回。若把 BackColor 赋在外层的条件格式集合上，赋值会被接受，也不会报错，但保存后文件里的规则不带填充，单元格保持原样。
解决：把颜色赋给条件对象，也就是上面几个方法的返回值：
// 条件对象才是承载颜色的地方
const formats = sheet.ConditionalFormats.Add();
formats.AddRange(sheet.Range.get("C2:C10"));
const condition = formats.AddCondition();
condition.FormatType = xlsModule.ConditionalFormatType.DuplicateValues;
condition.BackColor = xlsModule.Color.get_IndianRed();
为什么用代码读取单元格颜色，读不到条件格式设的填充色？
原因：条件格式的颜色不属于单元格自身的格式。它随规则一起存放在文件的条件格式设置中，单元格原有的样式不受影响，所以加规则之前与之后读到的颜色完全相同。
解决：颜色从条件对象上读，也就是 AddCondition、AddAverageCondition 或 AddTopBottomCondition 的返回值：
// 条件格式的颜色存在条件对象上，不在单元格样式里
const formats = sheet.ConditionalFormats.Add();
formats.AddRange(sheet.Range.get("C2:C10"));
const condition = formats.AddCondition();
condition.FormatType = xlsModule.ConditionalFormatType.DuplicateValues;
condition.BackColor = xlsModule.Color.get_IndianRed();
// 读回来就是刚才设置的颜色
console.log(condition.BackColor);
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
