在收集或汇总数据时，手工输入最容易出现拼写不一致、名称不统一的问题。下拉列表把可选项固定下来，录入时只需选择，不必反复输入；选项来自表格数据时，修改源数据即可同步更新列表。本文使用 Spire.XLS for JavaScript 在浏览器端完成下拉列表的创建，输入输出文件通过虚拟文件系统（VFS）管理，无需后端服务。

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

• 使用固定选项创建下拉列表
• 使用同一工作表的数据创建下拉列表
• 使用其他工作表的数据创建下拉列表
• 创建联动下拉列表
• 跨工作表创建联动下拉列表

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

使用固定选项创建下拉列表

固定选项适合选项数量少、不会随表格数据变化的场景，例如类别或状态。把一组值直接设为目标单元格的可选内容后，打开文件即可从下拉列表中选择，输入其他内容会按设置给出提示。

使用固定选项创建下拉列表的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与 Excel 测试文件载入 VFS。
2. 用 new Workbook() 新建工作簿，再用 workbook.LoadFromFile 载入测试文件。
3. 调用 workbook.Worksheets.get(0) 取得录入表。
4. 把固定选项数组赋给 sheet.Range.get('B2').DataValidation.Values。
5. 用 workbook.SaveToFile 写出结果文件，再用 workbook.Dispose 释放资源并从 VFS 读取工作簿触发下载。

以下为完整的代码示例，演示如何使用固定选项创建下拉列表：

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

    // 把固定选项赋给 B2 单元格
    sheet.Range.get('B2').DataValidation.Values = ['华东', '华北', '华南', '西南'];

    // 将结果保存到 VFS
    const outputFileName = 'FixedOptionsDropdown.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>在 React 中创建 Excel 下拉列表</h1>
      <button id="fixed-options" onClick={createFixedDropdown}>固定选项下拉列表</button>
    </div>
  );
}

export default App;

使用固定选项创建下拉列表后的工作簿：

使用同一工作表的数据创建下拉列表

当选项已经保存在同一张工作表的某列中时，直接引用该区域即可。下拉列表与源数据保持关联，修改源区域的内容后，列表选项随之更新，不必在代码中重复维护。

使用同一工作表的数据创建下拉列表的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与 Excel 测试文件载入 VFS。
2. 用 new Workbook() 新建工作簿，再用 workbook.LoadFromFile 载入测试文件。
3. 调用 workbook.Worksheets.get(1) 取得存放选项的工作表。
4. 把该工作表 D2:D5 区域赋给 F2 单元格的 DataValidation.DataRange。
5. 用 workbook.SaveToFile 写出结果文件，再用 workbook.Dispose 释放资源并从 VFS 读取工作簿触发下载。

以下为完整的代码示例，演示如何使用同一工作表的数据创建下拉列表：

function App() {
  const createSameSheetDropdown = 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 = 'DropdownData.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(1);

    // 以 D2:D5 的内容作为 F2 单元格的下拉选项
    sheet.Range.get('F2').DataValidation.DataRange = sheet.Range.get('D2:D5');

    // 将结果保存到 VFS
    const outputFileName = 'SameSheetDropdown.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>在 React 中创建 Excel 下拉列表</h1>
      <button id="same-sheet" onClick={createSameSheetDropdown}>同表数据下拉列表</button>
    </div>
  );
}

export default App;

使用同一工作表的数据创建下拉列表后的工作簿：

使用其他工作表的数据创建下拉列表

选项集中在另一张工作表时，可以把源数据与录入界面分开：录入表只保留待填写的单元格，选项统一放在数据表中维护。跨表引用前需要先允许数据验证使用其他工作表的区域。

使用其他工作表的数据创建下拉列表的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与 Excel 测试文件载入 VFS。
2. 用 new Workbook() 新建工作簿，再用 workbook.LoadFromFile 载入测试文件。
3. 调用 workbook.Worksheets.get(0) 取得录入表，调用 workbook.Worksheets.get(2) 取得存放选项的工作表。
4. 把 workbook.Allow3DRangesInDataValidation 设为 true。
5. 把选项表的 A2:A5 区域赋给录入表 B2 单元格的 DataValidation.DataRange。
6. 用 workbook.SaveToFile 写出结果文件，再用 workbook.Dispose 释放资源并从 VFS 读取工作簿触发下载。

以下为完整的代码示例，演示如何使用其他工作表的数据创建下拉列表：

function App() {
  const createCrossSheetDropdown = 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 = 'DropdownData.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 backupSheet = workbook.Worksheets.get(2);

    // 允许数据验证引用其他工作表
    workbook.Allow3DRangesInDataValidation = true;

    // 以另一张工作表的 A2:A5 作为 B2 单元格的下拉选项
    sheet.Range.get('B2').DataValidation.DataRange = backupSheet.Range.get('A2:A5');

    // 将结果保存到 VFS
    const outputFileName = 'CrossSheetDropdown.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>在 React 中创建 Excel 下拉列表</h1>
      <button id="other-sheet" onClick={createCrossSheetDropdown}>跨表数据下拉列表</button>
    </div>
  );
}

export default App;

使用其他工作表的数据创建下拉列表后的工作簿：

创建联动下拉列表

联动下拉列表把两个列表关联起来：前一个单元格选定某个分类后，后一个单元格只显示对应的选项。实现时先把每组选项定义为命名区域，再用 INDIRECT 根据前一个单元格的内容切换引用，这样不必为每个分类单独写判断逻辑。

创建联动下拉列表的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与 Excel 测试文件载入 VFS。
2. 用 new Workbook() 新建工作簿，再用 workbook.LoadFromFile 载入测试文件。
3. 调用 workbook.Worksheets.get(1) 取得存放分类与选项的工作表。
4. 用 workbook.NameRanges.Add 分别建立“水果”和“颜色”命名区域，再用 RefersToRange 指向各自的选项列表。
5. 为录入表 B2 单元格设置分类下拉列表，选项来自分类列。
6. 把 C2 单元格的 DataValidation.AllowType 设为 xlsModule.CellDataType.User，再把 DataValidation.Formula1 设为 =INDIRECT($B$2)。
7. 用 workbook.SaveToFile 写出结果文件，再用 workbook.Dispose 释放资源并从 VFS 读取工作簿触发下载。

以下为完整的代码示例，演示如何创建联动下拉列表：

function App() {
  const createDependentDropdown = 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 = 'DropdownData.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 listsSheet = workbook.Worksheets.get(1);

    // 建立“水果”命名区域并指向水果选项列表
    const fruitName = workbook.NameRanges.Add('水果');
    fruitName.RefersToRange = listsSheet.Range.get('B2:B4');

    // 建立“颜色”命名区域并指向颜色选项列表
    const colorName = workbook.NameRanges.Add('颜色');
    colorName.RefersToRange = listsSheet.Range.get('C2:C4');

    // 为 B2 设置分类下拉列表
    sheet.Range.get('B2').DataValidation.DataRange = listsSheet.Range.get('A2:A3');

    // 为 C2 设置联动下拉列表
    sheet.Range.get('C2').DataValidation.AllowType = xlsModule.CellDataType.User;
    sheet.Range.get('C2').DataValidation.Formula1 = '=INDIRECT($B$2)';

    // 将结果保存到 VFS
    const outputFileName = 'DependentDropdown.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>在 React 中创建 Excel 下拉列表</h1>
      <button id="dependent" onClick={createDependentDropdown}>联动下拉列表</button>
    </div>
  );
}

export default App;

创建联动下拉列表后的工作簿：

跨工作表创建联动下拉列表

录入表与选项表分属不同工作表时，联动公式可以跨表引用前一个下拉单元格。这样录入界面、选项数据和联动结果可以分别放在不同的工作表中，便于维护。

跨工作表创建联动下拉列表的写法与结果：

具体操作步骤如下：

1. 用 window.spire.FetchFileToVFS 把字体文件与 Excel 测试文件载入 VFS。
2. 用 new Workbook() 新建工作簿，再用 workbook.LoadFromFile 载入测试文件。
3. 调用 workbook.Worksheets.get(0) 取得录入表，调用 workbook.Worksheets.get(1) 取得选项表，调用 workbook.Worksheets.get(2) 取得第二个录入表。
4. 用 workbook.NameRanges.Add 建立“水果”和“颜色”命名区域，再用 RefersToRange 指向选项列表。
5. 把 workbook.Allow3DRangesInDataValidation 设为 true，并为录入表 B2 设置分类下拉列表。
6. 把第二个录入表 C2 单元格的 DataValidation.AllowType 设为 xlsModule.CellDataType.User，再把 DataValidation.Formula1 设为 =INDIRECT(Form!$B$2)。
7. 用 workbook.SaveToFile 写出结果文件，再用 workbook.Dispose 释放资源并从 VFS 读取工作簿触发下载。

以下为完整的代码示例，演示如何跨工作表创建联动下拉列表：

function App() {
  const createCrossSheetDependentDropdown = 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 = 'DropdownData.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 listsSheet = workbook.Worksheets.get(1);
    const backupSheet = workbook.Worksheets.get(2);

    // 建立“水果”命名区域并指向水果选项列表
    const fruitName = workbook.NameRanges.Add('水果');
    fruitName.RefersToRange = listsSheet.Range.get('B2:B4');

    // 建立“颜色”命名区域并指向颜色选项列表
    const colorName = workbook.NameRanges.Add('颜色');
    colorName.RefersToRange = listsSheet.Range.get('C2:C4');

    // 允许数据验证引用其他工作表
    workbook.Allow3DRangesInDataValidation = true;

    // 为录入表 B2 设置分类下拉列表
    sheet.Range.get('B2').DataValidation.DataRange = listsSheet.Range.get('A2:A3');

    // 为第二个录入表的 C2 设置跨表联动下拉列表
    backupSheet.Range.get('C2').DataValidation.AllowType = xlsModule.CellDataType.User;
    backupSheet.Range.get('C2').DataValidation.Formula1 = '=INDIRECT(Form!$B$2)';

    // 将结果保存到 VFS
    const outputFileName = 'CrossSheetDependentDropdown.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>在 React 中创建 Excel 下拉列表</h1>
      <button id="cross-sheet-dependent" onClick={createCrossSheetDependentDropdown}>跨表联动下拉列表</button>
    </div>
  );
}

export default App;

跨工作表创建联动下拉列表后的工作簿：

常见问题

如何隐藏下拉列表的箭头

原因：单元格右侧的箭头由数据验证的 IsSuppressDropDownArrow 设置控制，默认为 false，因此设置下拉列表后会显示箭头。

解决：把该属性设为 true，箭头即被隐藏，数据验证仍然生效：

const validation = sheet.Range.get('B2').DataValidation;
validation.Values = ['华东', '华北', '华南', '西南'];
validation.IsSuppressDropDownArrow = true;

下拉列表为什么出现空白选项

原因：DataValidation.DataRange 指向的区域包含空单元格时，空白单元格也会被当作列表项；区域越大，空白项越多。

解决：把 DataRange 指向实际有值的区域。例如选项只占 D2:D5 时，使用 sheet.Range.get('D2:D5')，不要扩大到 D2:D8；新增选项后同步调整该区域。

获取免费许可证

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