如何使用Excel JavaScript API实现单元格/区域选择器输入组件？

没有内置UI组件可直接复用，但能通过Excel JavaScript API结合事件监听与焦点切换，实现和原生选择器一致的交互效果，具体步骤如下：

• 注册区域选择监听：用户点击自定义选择控件时，注册DocumentSelectionChanged事件，用于捕获Excel中选中的区域。
• 切换焦点到Excel窗口：任务窗格以iframe形式嵌入Excel，通过window.parent.focus()可直接让Excel主窗口获得焦点，无需用户额外点击即可选择单元格/区域。
• 填充选中区域地址：用户完成选择后，通过事件回调获取选中区域的地址，更新输入框内容，同时移除事件监听避免后续操作干扰。

React组件示例代码：

import { useState } from 'react';

const RangeSelector = () => {
  const [rangeAddress, setRangeAddress] = useState('');

  const handleSelectRange = async () => {
    try {
      // 移除已有监听，防止重复触发
      await Office.context.document.removeHandlerAsync(Office.EventType.DocumentSelectionChanged);
      // 注册选择变化监听
      await Office.context.document.addHandlerAsync(
        Office.EventType.DocumentSelectionChanged,
        handleSelectionChange
      );
      // 切换焦点到Excel主窗口
      window.parent.focus();
    } catch (error) {
      console.error('启动区域选择失败:', error);
    }
  };

  const handleSelectionChange = async () => {
    try {
      await Excel.run(async (context) => {
        const selectedRange = context.workbook.getSelectedRange();
        selectedRange.load('address');
        await context.sync();
        // 更新输入框内容
        setRangeAddress(selectedRange.address);
        // 移除监听，结束选择流程
        await Office.context.document.removeHandlerAsync(Office.EventType.DocumentSelectionChanged);
      });
    } catch (error) {
      console.error('获取选中区域失败:', error);
      // 出错时也移除监听
      await Office.context.document.removeHandlerAsync(Office.EventType.DocumentSelectionChanged);
    }
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <input
        type="text"
        value={rangeAddress}
        readOnly
        placeholder="点击右侧选择区域"
        style={{ padding: '4px' }}
      />
      <div onClick={handleSelectRange} style={{ cursor: 'pointer', marginLeft: '8px' }}>
        📋
      </div>
    </div>
  );
};

export default RangeSelector;

注意事项：

• 需确保已通过Office.onReady()完成Office.js的初始化加载。
• window.parent.focus()在桌面版和在线版Excel中兼容性一致，可直接使用。
• 可添加交互提示（如输入框临时显示“请在Excel中选择区域”），提升用户体验。

内容的提问来源于stack exchange，提问作者Facundo Ch.