在日常 Excel 数据处理中，排序是最常用的操作之一——无论是按名称、数值还是日期重新排列数据，都能让表格更有条理、便于检索。Spire.XLS for JavaScript 基于 WebAssembly 在浏览器端直接完成数据排序，通过虚拟文件系统（VFS）管理输入输出文件，无需后端服务支持。

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

• 对单元格区域内的数据升序排序
• 按多个列对数据排序

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

对单元格区域内的数据升序排序

对指定单元格区域进行升序排序是最常见的数据整理需求。Spire.XLS for JavaScript 通过 Workbook.DataSorter.SortColumns.Add() 方法添加排序字段并指定排序方式，再通过 Workbook.DataSorter.Sort() 方法对指定区域进行排序。具体操作步骤如下：

1. 创建 Workbook 对象，并使用 LoadFromFile() 方法加载 Excel 文档。
2. 通过 Workbook.Worksheets.get() 方法获取指定工作表。
3. 使用 Workbook.DataSorter.SortColumns.Add() 方法添加排序字段，指定排序列和排序方式。
4. 使用 Workbook.DataSorter.Sort() 方法对指定单元格区域进行排序。
5. 通过 Workbook.SaveToFile() 方法保存文档到指定路径。

下面是一个完整的代码示例，展示了在 React 中按单个列对单元格区域进行升序排序：

function App() {
  const sortAscending = 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 = 'DataSorting.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);

    // 添加排序字段：按第 5 列（人口）升序排序
    workbook.DataSorter.SortColumns.Add({ key: 4, orderBy: xlsModule.OrderBy.Ascending });

    // 对指定单元格区域 A1:E19 排序
    workbook.DataSorter.Sort(sheet.Range.get("A1:E19"));

    // 保存文档
    const outputFileName = 'SortDataAscending_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>Sort Data in Ascending Order</h1>
      <button onClick={sortAscending}>
        Start
      </button>
    </div>
  );
}

export default App;

排序后，数据将按照第 5 列（人口）的数值从小到大升序排列，同一行中的其余列数据会与人口列保持对齐。

按多个列对数据排序

当单列排序无法满足需求时，可以同时按多个列进行排序。Spire.XLS for JavaScript 支持多次调用 SortColumns.Add() 方法添加多个排序字段，排序时先按第一个字段排序，再按后续字段排序。具体操作步骤如下：

1. 创建 Workbook 对象，并使用 LoadFromFile() 方法加载 Excel 文档。
2. 通过 Workbook.Worksheets.get() 方法获取指定工作表。
3. 多次调用 Workbook.DataSorter.SortColumns.Add() 方法添加多个排序字段。
4. 使用 Workbook.DataSorter.Sort() 方法对指定单元格区域进行排序。
5. 通过 Workbook.SaveToFile() 方法保存文档到指定路径。

下面是一个完整的代码示例，展示了在 React 中按多个列对单元格区域进行排序：

function App() {
  const sortMultipleColumns = 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 = 'DataSorting.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);

    // 添加多个排序字段：先按第 3 列（洲）升序，再按第 4 列（面积）升序
    workbook.DataSorter.SortColumns.Add({ key: 2, orderBy: xlsModule.OrderBy.Ascending });
    workbook.DataSorter.SortColumns.Add({ key: 3, orderBy: xlsModule.OrderBy.Ascending });

    // 对指定单元格区域 A1:E19 排序
    workbook.DataSorter.Sort(sheet.Range.get("A1:E19"));

    // 保存文档
    const outputFileName = 'SortDataMultipleColumns_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>Sort Data by Multiple Columns</h1>
      <button onClick={sortMultipleColumns}>
        Start
      </button>
    </div>
  );
}

export default App;

排序后，数据先按第 3 列（洲）升序排列，将同属一个洲的国家归拢在一起；当洲相同时，再按第 4 列（面积）升序排列。

常见问题

排序时表头行也被参与了排序

原因：DataSorter.Sort() 方法默认将排序区域的首行视为标题行并保留在原位置。如果表头被移到了数据行中，通常是排序区域起始行设置不正确。

解决：确认传入 Sort() 方法的区域包含表头行，且表头行位于区域的顶部，例如 sheet.Range.get("A1:E19")。也可以从数据行开始排序，如 sheet.Range.get("A2:E19")。

单列排序后，其他列的数据没有跟随变化

原因：排序只对传入 Sort() 方法的单元格区域生效。如果只对单独一列的区域排序，其他列不会跟随重排，导致同行数据错位。

解决：让排序区域覆盖所有相关列（例如包含名称、首都、洲、面积、人口的完整区域 A1:E19），从而保证整行数据一起移动。

获取免费许可证

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