如何通过Office JS API在Excel加载项中显示非React DOM自定义通知

当然可以实现！下面提供两种实用方案，帮你在Excel界面任意位置展示通知，完全脱离React DOM的限制：

方案一：使用Office JavaScript API原生通知 #

这是最贴合Excel生态的方案，直接调用Office提供的API显示系统级通知，样式和Excel原生一致，无需自己处理定位：

// 显示错误通知
Office.context.ui.showNotification(
  "输入错误", 
  "文本框不能为空，请填写内容",
  Office.MailboxEnums.NotificationType.Error
);

// 也可以显示信息/警告类型
// Office.context.ui.showNotification("提示", "操作成功", Office.MailboxEnums.NotificationType.Information);
// Office.context.ui.showNotification("警告", "内容格式不正确", Office.MailboxEnums.NotificationType.Warning);

这个通知会直接显示在Excel界面的顶部区域，完全独立于你的React应用DOM结构。

方案二：自定义悬浮通知（挂载到document.body） #

如果需要完全自定义样式和位置，可以创建独立的DOM容器，将Fluent UI通知组件挂载到document.body上，脱离React根节点：

1. 创建通知工具函数 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { MessageBar, MessageBarType } from '@fluentui/react-components';

export function showCustomNotification(message, type = MessageBarType.error) {
  // 创建临时DOM容器
  const container = document.createElement('div');
  container.style.position = 'fixed';
  container.style.top = '20px';
  container.style.right = '20px';
  container.style.zIndex = '9999';
  container.style.maxWidth = '300px';
  document.body.appendChild(container);

  // 挂载Fluent UI MessageBar
  const root = ReactDOM.createRoot(container);
  root.render(
    <MessageBar type={type} onDismiss={() => {
      root.unmount();
      document.body.removeChild(container);
    }}>
      {message}
    </MessageBar>
  );

  // 可选：自动关闭通知
  setTimeout(() => {
    root.unmount();
    document.body.removeChild(container);
  }, 5000);
}

2. 在需要的地方调用 #

// 比如文本框为空时触发
if (!inputValue) {
  showCustomNotification("文本框不能为空，请填写内容");
}

这个方案可以自由调整通知的位置、样式和行为，完全不受React组件DOM结构的约束。

注意事项 #

• 使用Office API通知时，样式是固定的，无法自定义，但兼容性最好；
• 自定义通知要注意设置足够高的z-index，确保能在Excel界面上方显示；
• 自定义通知需要手动清理DOM元素，避免内存泄漏（比如在关闭或自动隐藏时移除容器）。

内容的提问来源于stack exchange，提问作者Shiv Yadav