如何在ReactJS中创建Excel自定义函数？求相关方案与资源

核心实现思路 #

Excel自定义函数本质基于Office JavaScript API，React主要用于构建配套的任务窗格UI，或封装复杂业务逻辑供自定义函数调用。两者可通过共享运行时（Shared Runtime）实现数据互通，核心是将自定义函数的计算逻辑与React组件逻辑解耦，复用工具层代码。

具体实现步骤 #

1. 初始化项目
   使用Office Yeoman生成器创建带自定义函数和React的模板项目，执行命令：

   yo office
   

   选择Excel Custom Functions using React模板，生成的项目会自动配置好Office JS环境、React依赖和自定义函数目录结构。

2. 编写自定义函数
   在src/functions目录下创建/修改函数文件，用@customfunction装饰器定义函数，示例：

   import { CustomFunction } from "@microsoft/office-js";
   
   @CustomFunction({ description: "计算两数之和的自定义函数" })
   export function calculateSum(a: number, b: number): number {
     // 可调用React项目中封装的工具函数
     return a + b;
   }
   

3. 集成React逻辑

   • 将复杂计算逻辑封装为独立的工具类/函数，放在src/utils目录下，同时供React组件和自定义函数调用
   • 若需在自定义函数中访问React组件的状态，需开启共享运行时（在manifest.xml中配置Runtime为Shared），通过Office JS的Office.context实现数据传递

4. 调试与部署

   • 执行npm start启动本地调试服务器，在Excel中通过“插入加载项”加载本地manifest文件测试函数
   • 执行npm run build打包项目，将打包后的文件部署到静态服务器，更新manifest中的部署地址后发布

参考GitHub项目示例 #

• 微软官方Excel自定义函数+React共享运行时示例：包含任务窗格与自定义函数的状态同步、复杂数据处理场景，是官方推荐的入门参考
• 社区项目react-excel-functions-demo：展示如何用React Hooks封装计算逻辑，并通过Office JS暴露为Excel自定义函数，适合需要复用React状态管理能力的场景
• excel-custom-functions-react-table：实现了基于React表格组件的数据批量处理自定义函数，支持从Excel读取数据并返回格式化结果

核心参考文档 #

• Office JavaScript API 自定义函数官方指南：涵盖自定义函数的定义、参数、返回值、运行模式等核心知识点
• Office Add-in React开发文档：讲解如何在Office加载项中使用React构建任务窗格，并与自定义函数共享代码
• Excel自定义函数运行模式说明：详细对比Shared Runtime与Isolated Runtime的差异，指导如何配置跨上下文数据交互

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