在日常办公中，隐藏和取消隐藏 Excel 的行和列是一项常用的功能，它可以帮助您保护敏感信息、简化数据视图或临时隐藏不必要的数据。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成对 Excel 行和列的隐藏与取消隐藏操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。它提供了简洁的 API 用于控制行和列的可见性状态。
本文介绍四个核心功能点：
有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。
在 Excel 中隐藏特定的行和列
隐藏特定的行和列可以在不影响数据完整性的前提下，让工作表更加清晰整洁。Spire.XLS for JavaScript 通过 HideRow() 和 HideColumn() 方法支持隐藏工作表中指定的单行或单列。具体操作步骤如下：
- 创建
Workbook对象并加载包含数据的已有 Excel 文件。 - 使用
worksheet.HideRow()隐藏指定的行。 - 使用
worksheet.HideColumn()隐藏指定的列。 - 使用
SaveToFile()保存工作簿为 Excel 文件。
下面是一个完整的代码示例，展示了在 React 中隐藏 Excel 中特定的行和列：
function App() {
const hideSpecificRowsAndColumns = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将示例文件加载到虚拟文件系统（VFS）
let excelFileName = 'Sample.xlsx';
await window.spire.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}data/`);
// 创建工作簿对象并加载已有文件
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: excelFileName });
let sheet = workbook.Worksheets.get(0);
// 隐藏特定的行（第 4 行）
sheet.HideRow(4);
// 隐藏特定的列（第 2 列，即 B 列）
sheet.HideColumn(2);
// 保存工作簿
const outputFileName = 'HideSpecificRowsColumns.xlsx';
workbook.SaveToFile(outputFileName);
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>Hide Specific Rows and Columns</h1>
<button onClick={hideSpecificRowsAndColumns}>
Generate
</button>
</div>
);
}
export default App;
使用 Spire.XLS for JavaScript 隐藏特定的行和列
在 Excel 中取消隐藏特定的行和列
当需要查看或编辑被隐藏的特定数据时，可以单独取消隐藏某一行或某一列。Spire.XLS for JavaScript 通过 ShowRow() 和 ShowColumn() 方法支持取消隐藏工作表中指定的单行或单列。具体操作步骤如下：
- 创建
Workbook对象并加载包含隐藏行列的已有 Excel 文件。 - 使用
sheet.ShowRow()取消隐藏特定的行。 - 使用
sheet.ShowColumn()取消隐藏特定的列。 - 使用
SaveToFile()保存工作簿为 Excel 文件。
下面是一个完整的代码示例，展示了在 React 中取消隐藏 Excel 中特定的行和列：
function App() {
const unhideSpecificRowsAndColumns = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将示例文件加载到虚拟文件系统（VFS）
let excelFileName = 'HideSpecificRowsColumns.xlsx';
await window.spire.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}data/`);
// 创建工作簿对象并加载已有文件
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: excelFileName });
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
// 取消隐藏特定的行（第 4 行）
sheet.ShowRow(4);
// 取消隐藏特定的列（第 2 列，即 B 列）
sheet.ShowColumn(2);
// 保存工作簿
const outputFileName = 'UnhideSpecificRowsColumns.xlsx';
workbook.SaveToFile(outputFileName);
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>Unhide Specific Rows and Columns</h1>
<button onClick={unhideSpecificRowsAndColumns}>
Generate
</button>
</div>
);
}
export default App;
使用 Spire.XLS for JavaScript 取消隐藏特定的行和列
在 Excel 中一次性隐藏多个行和列
当工作表中存在多个不需要显示的行或列时，逐个隐藏显然效率低下。Spire.XLS for JavaScript 支持通过循环调用 HideRow() 或 HideColumn() 一次性隐藏多个行和列，大大提升了操作效率。具体操作步骤如下：
- 创建
Workbook对象并加载包含数据的已有 Excel 文件。 - 通过循环调用
worksheet.HideRow()一次性隐藏多个行。 - 通过循环调用
worksheet.HideColumn()一次性隐藏多个列。 - 使用
SaveToFile()保存工作簿为 Excel 文件。
下面是一个完整的代码示例，展示了在 React 中一次性隐藏 Excel 中的多个行和列：
function App() {
const hideMultipleRowsAndColumns = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将示例文件加载到虚拟文件系统（VFS）
let excelFileName = 'Sample.xlsx';
await window.spire.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}data/`);
// 创建工作簿对象并加载已有文件
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: excelFileName });
let sheet = workbook.Worksheets.get(0);
// 一次性隐藏多个行（第 6 行到第 10 行）
for (let i = 6; i <= 10; i++) {
sheet.HideRow(i);
}
// 一次性隐藏多个列（第 4 列到第 5 列，即 D 列到 E 列）
for (let j = 4; j <= 5; j++) {
sheet.HideColumn(j);
}
// 保存工作簿
const outputFileName = 'HideMultipleRowsColumns.xlsx';
workbook.SaveToFile(outputFileName);
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>Hide Multiple Rows and Columns</h1>
<button onClick={hideMultipleRowsAndColumns}>
Generate
</button>
</div>
);
}
export default App;
使用 Spire.XLS for JavaScript 一次性隐藏多个行和列
在 Excel 中取消隐藏所有被隐藏的行和列
要取消隐藏所有被隐藏的行和列，需要遍历工作表中的行和列，使用 GetRowIsHide() 和 GetColumnIsHide() 找到被隐藏的行和列，再调用 ShowRow() 和 ShowColumn() 取消隐藏。具体步骤如下：
- 创建
Workbook对象并加载 Excel 文件。 - 获取工作表。
- 遍历行，用
GetRowIsHide()找到被隐藏的行，用ShowRow()取消隐藏。 - 遍历列，用
GetColumnIsHide()找到被隐藏的列，用ShowColumn()取消隐藏。 - 使用
SaveToFile()保存结果文件。
下面是一个完整的代码示例，展示了在 React 中取消隐藏 Excel 中所有被隐藏的行和列：
function App() {
const unhideAllRowsAndColumns = async () => {
// 获取 Spire.XLS WASM 模块
const xlsModule = window.wasmModule?.spirexls;
// 检查模块是否就绪
if (!xlsModule) {
alert('Spire.Xls is not ready yet');
return;
}
// 将示例文件加载到虚拟文件系统（VFS）
let excelFileName = 'HideMultipleRowsColumns.xlsx';
await window.spire.FetchFileToVFS(excelFileName, '', `${process.env.PUBLIC_URL}data/`);
// 创建工作簿对象并加载已有文件
const workbook = new xlsModule.Workbook();
workbook.LoadFromFile({ fileName: excelFileName });
// 获取第一个工作表
let sheet = workbook.Worksheets.get(0);
for (let i = 1; i <= sheet.Rows.length; i++) {
if (sheet.GetRowIsHide(i)) {
// 取消隐藏行
sheet.ShowRow(i);
}
}
for (let j = 1; j <= sheet.Columns.length; j++) {
if (sheet.GetColumnIsHide(j)) {
// 取消隐藏列
sheet.ShowColumn(j);
}
}
// 保存工作簿
const outputFileName = 'UnhideAllRowsColumns.xlsx';
workbook.SaveToFile(outputFileName);
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>Unhide All Rows and Columns</h1>
<button onClick={unhideAllRowsAndColumns}>
Generate
</button>
</div>
);
}
export default App;
使用 Spire.XLS for JavaScript 取消隐藏所有被隐藏的行和列
常见问题
如何判断某一行或某一列是否被隐藏？
解决：使用 GetRowIsHide() 和 GetColumnIsHide() 方法进行判断：
// 检查第 3 行是否被隐藏
let rowIsHidden = sheet.GetRowIsHide(3);
// 检查第 2 列（B 列）是否被隐藏
let columnIsHidden = sheet.GetColumnIsHide(2);
隐藏行或列后，行高或列宽是否会被保留？
解决：隐藏行或列时，原始行高和列宽信息会被保留。当使用 ShowRow() 或 ShowColumn() 取消隐藏后，会自动恢复为原来的尺寸，无需额外设置。
获取免费许可证
如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。
