在日常 Excel 表格处理中，对行或列进行分组可以将明细数据折叠起来，只显示汇总信息，从而让大型表格更加简洁、便于阅读。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成分组与取消分组操作，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

本文介绍两个核心功能点：

• 设置行或列分组
• 取消设置行或列分组

有关安装和项目配置，请参考 React 项目中集成 Spire.XLS for JavaScript。以下示例默认已安装 Spire.XLS 并完成 WebAssembly 模块初始化。

设置行或列分组

对行或列进行分组后，可以将分组内的明细数据折叠起来，只保留需要的汇总行或汇总列，让工作表更清爽。Spire.XLS for JavaScript 通过 GroupByRows() 方法组合行、通过 GroupByColumns() 方法组合列。具体操作步骤如下：

1. 创建 Workbook 对象，并使用 LoadFromFile() 方法加载 Excel 文档。
2. 通过 Workbook.Worksheets.get() 方法获取指定工作表。
3. 使用 Worksheet.GroupByRows() 方法组合行。
4. 使用 Worksheet.GroupByColumns() 方法组合列。
5. 通过 Workbook.SaveToFile() 方法保存文档到指定路径。

下面是一个完整的代码示例，展示了在 React 中设置行或列分组：

function App() {
  const groupRowsAndColumns = 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 = 'GroupRowsAndColumns.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.GroupByRows(6, 10, false);
    sheet.GroupByRows(14, 16, false);

    // 设置列数据分组
    sheet.GroupByColumns(2, 7, false);

    // 保存文档
    const outputFileName = 'GroupRowsAndColumns_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // 释放资源
    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>Group Rows And Columns</h1>
      <button onClick={groupRowsAndColumns}>
        Start
      </button>
    </div>
  );
}

export default App;

设置行或列分组后，被分组区域左侧或上方会出现分组标记，点击标记即可折叠或展开明细数据。

取消设置行或列分组

当不再需要分组结构时，可以取消已有的分组，使所有行和列恢复为普通显示。Spire.XLS for JavaScript 通过 UngroupByRows() 方法取消行组合、通过 UngroupByColumns() 方法取消列组合。具体操作步骤如下：

1. 创建 Workbook 对象，并使用 LoadFromFile() 方法加载包含分组的 Excel 文档。
2. 通过 Workbook.Worksheets.get() 方法获取指定工作表。
3. 使用 Worksheet.UngroupByRows() 方法取消行组合。
4. 使用 Worksheet.UngroupByColumns() 方法取消列组合。
5. 通过 Workbook.SaveToFile() 方法保存文档到指定路径。

下面是一个完整的代码示例，展示了在 React 中取消设置行或列分组：

function App() {
  const ungroupRowsAndColumns = 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 = 'GroupRowsAndColumns.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.UngroupByRows(6, 10);
    sheet.UngroupByRows(14, 16);

    // 取消列数据组合
    sheet.UngroupByColumns(2, 7);

    // 保存文档
    const outputFileName = 'UngroupRowsAndColumns_output.xlsx';
    workbook.SaveToFile({ fileName: outputFileName, version: xlsModule.ExcelVersion.Version2010 });

    // 释放资源
    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>Ungroup Rows And Columns</h1>
      <button onClick={ungroupRowsAndColumns}>
        Start
      </button>
    </div>
  );
}

export default App;

取消分组后，行或列的分组标记消失，数据恢复为未分组的普通显示。

常见问题

分组后无法折叠或展开明细数据

原因：GroupByRows() 和 GroupByColumns() 方法的第三个参数 isCollapsed 设置为 false，分组默认以展开状态显示。

解决：将该参数设置为 true，保存后分组将以折叠状态显示：

sheet.GroupByRows(6, 10, true);

取消分组后，部分行或列仍然显示分组符号

原因：UngroupByRows() 和 UngroupByColumns() 方法仅取消指定范围内行或列的分组。如果这些行或列同时属于更高层级的分组，更高层级的分组符号仍然会保留。

解决：确认取消分组时传入的行列范围与设置分组时保持一致；若存在嵌套分组，可多次调用取消方法逐层取消：

sheet.UngroupByRows(6, 10);
sheet.UngroupByRows(14, 16);
sheet.UngroupByColumns(2, 7);

获取免费许可证

如果您希望删除结果文档中的评估消息，或者摆脱功能限制，请该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。获取有效期 30 天的临时许可证。