Office 365 Excel Web加载项：如何实现点击功能区标签弹出居中弹窗

1. 配置自定义功能区（Manifest文件） #

先确保你的加载项manifest.xml中已正确添加About按钮，并绑定点击触发的函数：

<ExtensionPoint xsi:type="PrimaryCommandSurface">
  <CustomTab id="CustomTab">
    <Group id="CustomGroup">
      <Label resid="CustomGroupLabel" />
      <Icon>
        <bt:Image size="16" resid="Icon.16x16" />
        <bt:Image size="32" resid="Icon.32x32" />
        <bt:Image size="80" resid="Icon.80x80" />
      </Icon>
      <!-- About按钮配置 -->
      <Control xsi:type="Button" id="AboutButton">
        <Label resid="AboutButtonLabel" />
        <Supertip>
          <Title resid="AboutButtonTitle" />
          <Description resid="AboutButtonDesc" />
        </Supertip>
        <Icon>
          <bt:Image size="16" resid="Icon.16x16" />
          <bt:Image size="32" resid="Icon.32x32" />
          <bt:Image size="80" resid="Icon.80x80" />
        </Icon>
        <!-- 点击触发的函数 -->
        <Action xsi:type="ExecuteFunction">
          <FunctionName>showAboutDialog</FunctionName>
        </Action>
      </Control>
    </Group>
    <Label resid="CustomTabLabel" />
  </CustomTab>
</ExtensionPoint>

<!-- 对应的资源字符串 -->
<Resources>
  <bt:Images>
    <bt:Image id="Icon.16x16" DefaultValue="https://your-domain.com/icon-16.png" />
    <bt:Image id="Icon.32x32" DefaultValue="https://your-domain.com/icon-32.png" />
    <bt:Image id="Icon.80x80" DefaultValue="https://your-domain.com/icon-80.png" />
  </bt:Images>
  <bt:ShortStrings>
    <bt:String id="CustomTabLabel" DefaultValue="我的加载项" />
    <bt:String id="CustomGroupLabel" DefaultValue="工具" />
    <bt:String id="AboutButtonLabel" DefaultValue="About" />
    <bt:String id="AboutButtonTitle" DefaultValue="关于" />
  </bt:ShortStrings>
  <bt:LongStrings>
    <bt:String id="AboutButtonDesc" DefaultValue="查看加载项的相关信息" />
  </bt:LongStrings>
</Resources>

2. 实现弹窗触发逻辑（JS代码） #

在加载项主JS文件（如index.js）中编写showAboutDialog函数，使用Office.js官方提供的对话框API创建居中弹窗：

Office.initialize = function(reason) {
  // 初始化完成后的可选逻辑
};

function showAboutDialog() {
  // 弹窗页面的路径，假设与主文件同目录
  const dialogUrl = './about.html';
  
  // 弹窗配置：设置宽高、自动居中
  const dialogOptions = {
    width: 300,
    height: 250,
    displayInIframe: true,
    position: Office.MailboxEnums.PositionType.Center
  };

  Office.context.ui.displayDialogAsync(dialogUrl, dialogOptions, function(result) {
    if (result.status === Office.AsyncResultStatus.Succeeded) {
      const dialog = result.value;
      // 监听弹窗关闭事件
      dialog.addEventHandler(Office.EventType.DialogEventReceived, function(eventArgs) {
        if (eventArgs.error) {
          console.error('弹窗出错:', eventArgs.error.message);
        }
      });
    } else {
      console.error('打开弹窗失败:', result.error.message);
    }
  });
}

3. 编写弹窗内容页面（about.html） #

创建一个展示About信息的HTML页面，添加关闭按钮逻辑：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>关于</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      text-align: center;
    }
    .container {
      margin-top: 30px;
    }
    .version {
      color: #666;
      margin-top: 15px;
    }
    button {
      margin-top: 20px;
      padding: 8px 16px;
      cursor: pointer;
    }
  </style>
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</head>
<body>
  <div class="container">
    <h2>我的Excel加载项</h2>
    <p>一款提升Excel效率的工具</p>
    <p class="version">版本：1.0.0</p>
    <p>作者：XXX</p>
    <button onclick="closeDialog()">关闭</button>
  </div>

  <script>
    function closeDialog() {
      // 通知主页面关闭弹窗
      Office.context.ui.messageParent('close');
    }
  </script>
</body>
</html>

关键说明 #

• 使用Office.context.ui.displayDialogAsync是Office官方推荐的弹窗实现方案，兼容Excel Web、桌面端等多环境。
• position: Office.MailboxEnums.PositionType.Center会自动将弹窗居中，无需手动计算窗口位置。
• 弹窗页面必须引用office.js，才能调用messageParent方法完成关闭操作。

内容的提问来源于stack exchange，提问作者Rudranil Banerjee