在日常 Excel 数据处理中，筛选是快速定位和查看目标数据最常用的手段之一。自动筛选器（AutoFilter）允许用户通过点击表头的下拉箭头，快速筛选出符合条件的数据行，避免在大量数据中手动查找。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成此操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。
本文介绍三个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
添加自动筛选器
在 Excel 中，自动筛选器是快速处理大量数据的重要功能，通过表头右侧的下拉箭头即可对每一列数据设置筛选条件。Spire.XLS for JavaScript 提供了 AutoFilters.Range 属性，只需将工作表的自动筛选范围设置为表头所在的单元格区域，即可为工作表添加自动筛选器。
function App() {
const addAutoFilter = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体和 Excel 文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'FilterData.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);
// 设置自动筛选器范围：表头的 A 到 C 列
sheet.AutoFilters.Range = sheet.Range.get("A1:C1");
// 保存结果文件，指定 Excel 版本为 2016
const outputFileName = "AddAutoFilter_output.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>Add AutoFilter</h1>
<button onClick={addAutoFilter}>
Start
</button>
</div>
);
}
export default App;
添加自动筛选器
应用过滤条件筛选数据
添加自动筛选器后，还可以在代码中通过 CustomFilter 方法为指定列设置自定义过滤条件，再调用 Filter 方法应用筛选，从而自动筛选出符合条件的数据行。例如，下面的代码将第二列（国家）的过滤条件设置为等于"中国"，应用筛选后仅保留国家为"中国"的数据行，其余行将被隐藏。
function App() {
const applyFilter = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体和 Excel 文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'FilterData.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);
// 设置自动筛选器范围：第二列（国家）的表头和数据行
sheet.AutoFilters.Range = sheet.Range.get("B1:B51");
// 获取自动筛选器的第一列
const filterColumn = sheet.AutoFilters.get(0);
// 设置自定义过滤条件：筛选国家为"中国"的行
const strCrt = "中国";
sheet.AutoFilters.CustomFilter({
column: filterColumn,
operatorType: xlsModule.FilterOperatorType.Equal,
criteria: new xlsModule.String(strCrt)
});
// 应用筛选器
sheet.AutoFilters.Filter();
// 保存结果文件，指定 Excel 版本为 2016
const outputFileName = "ApplyFilter_output.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>Apply Filter Condition</h1>
<button onClick={applyFilter}>
Start
</button>
</div>
);
}
export default App;
应用过滤条件筛选数据
移除自动筛选器
当不再需要对数据进行筛选时，可以通过 AutoFilters.Clear 方法清除工作表上的所有自动筛选器，使数据恢复完整显示。
function App() {
const removeAutoFilter = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将字体和 Excel 文件载入 VFS
await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
const inputFileName = 'FilteredData.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);
// 清除工作表中的所有自动筛选器
sheet.AutoFilters.Clear();
// 保存结果文件，指定 Excel 版本为 2016
const outputFileName = "RemoveAutoFilter_output.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>Remove AutoFilter</h1>
<button onClick={removeAutoFilter}>
Start
</button>
</div>
);
}
export default App;
移除自动筛选器
常见问题
筛选后数据没有隐藏
原因：设置过滤条件后没有调用 Filter() 方法应用筛选；或者 AutoFilters.Range 设置的区域没有覆盖需要筛选的数据行。
解决：设置过滤条件后调用 sheet.AutoFilters.Filter()；并确保 AutoFilters.Range 包含表头以及全部数据行所在的区域，例如示例中的 "B1:B51"。
按中文内容筛选失败
原因：筛选条件是精确匹配，如果筛选值与单元格内容不完全一致（例如包含前后空格）则无法匹配；
解决：确保筛选值与单元格内容完全一致；
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
