Featured image of post 开发 Office Add-ins 应用(一):在 word 里使用大模型

开发 Office Add-ins 应用(一):在 word 里使用大模型

Office Add-ins 可以理解为是一种可以扩展 Microsoft Office 应用程序(如 Word、Excel、PowerPoint 等)功能的小程序,能增强 Office 应用程序的能力,能与 Office 文档中的内容进行交互。从技术栈来说,它是基于 Web 技术

介绍

借助 Office Add-ins 可以在 word 里使用大模型与用户输入的内容做交互。甚至可以尝试接入 RTC 让用户用嘴写作,动口不动手。
b453b1cce3c6e66c8f7ee107a10961d5_MD5|500

Office Add-ins,中文 “加载项”。
下文中,讲到 Add-ins 主要是指这个技术,提到具体应用时,会用“加载项”概念,主要是指 Office 应用中、下图所示的功能。

概念

Office Add-ins 可以理解为是一种可以扩展 Microsoft Office 应用程序(如 Word、Excel、PowerPoint 等)功能的小程序,能增强 Office 应用程序的能力,能与 Office 文档中的内容进行交互。
从技术栈来说,它是基于 Web 技术(如 HTML、CSS 和 JavaScript)构建的,可以利用熟悉的 Web 技术栈来创建它们。
LLM 这两年来的火热,结合强大的内容生产工具套件——Office,其实可以给很多专业的内容工作者带来很大的帮助。

工作原理

  • 加载机制:用户在 Office 应用程序(如 Excel)中通过特定的界面(如 “插入” 选项卡中的 “我的加载项”)来加载和运行 Office Add-ins。当用户启动时,Office 应用程序会创建一个运行环境,加载相关的 Web 资源(HTML、CSS、JavaScript),并为 Add-ins 提供访问 Office 文档和应用程序功能的接口。
  • 交互方式:Add-ins 使用 JavaScript 调用 Office JavaScript API,来跟 Office 应用程序进行交互。这个 API 提供了许多对象和方法,允许 Add-ins 读取和写入文档内容、操作 UI 元素(如自定义任务窗格、功能区按钮)等。比如,一个 Word Add-ins 可以使用 API 获取当前文档中的段落数量,或者在文档的特定位置插入文本,或者获取内容然后与 LLM 对话。

应用场景

  • 数据可视化:可以将复杂的数据以直观的图表或图形形式展示在 Office 文档中。例如,在 Excel 中创建一个加载项,能够根据工作表中的数据自动生成精美的数据可视化图表,而且这些图表可以根据数据的更新而实时变化。
  • 协作工具:增强 Office 应用程序的协作功能。比如在 Word 文档中添加一个加载项,实现多人同时在线编辑文档时的实时评论和沟通功能,类似于在文档旁边开启一个小型的即时通讯窗口,方便团队成员交流想法。
  • 内容生成与自动化:帮助用户自动生成文档内容或进行格式设置。以 PowerPoint 为例,一个加载项可以根据用户输入的主题和要点自动生成一套完整的幻灯片,包括添加合适的图表、图片和布局等

Why Add-ins

官网给了一张图:
09c7cc8c5fb5ab19a79d21aac9c36d04_MD5

  • 可以跨端,不同端上都有 Office,你写的功能在不同平台上都可以跑起来
  • 中心化的分发,不用你自己到处去做上线(如 app Store)
  • 很容易下载安装
  • 开发的技术栈也都比较友好(Web)

市场(AppSource)

业务应用 - Microsoft AppSource
31a5772abd77fa083a40bbabf855bf21_MD5
可以看到已经有很多 AI 应用了,这个截图还只是首页的前几个应用。有不少官方也都上线了 Office Add-ins 应用,比如 Grammarly、Draw.io、Adobe、Wekipedia、Mermaid 等。生态已经比较成熟了。
d9eb88a665c0acd52243e001fb941aa8_MD5
过滤了下 Microsoft 365 相关的(如 Excel/Word/OneNote/Outlook/PPT 等)就有 7000+ 个。

交互形态

目前看到的主要交互形态有:
1、Excel 等里作为一个嵌入内容显示在表格中。

|500
2、Excel/Word/PPT 中作为侧边窗格可以单独进行交互。

  • 这种交互其中有两个操作点,一个是顶部,它也可以触发一个事件;另一个是侧边,本质上它是在侧边开一个类似 Webview 的容器,里面跑 Web 页面。
    |500
    |500
    |500
    |500

开发

工具安装

基础开发环境

1
pnpm install -g yo generator-office

如果没成功可能是依赖 mem-fs,直接安装下就可以:

1
pnpm install -g mem-fs

生成代码

1
yo office

091737356a84529f6186ece9c4b25f10_MD5
8fc4fc480f6fddbdf826d2095a18622c_MD5
生成后它默认用 npm 来 install,觉得慢的话直接把进程杀掉,然后重新跑 pnpm install
后面就是熟悉的 npm run start 了,写真正的代码逻辑了。

辅助开发工具

Office Addin 项目创建和基架工具是 Office 加载项的 Yeoman 生成器,简称为 yoGitHub - yeoman/yo: CLI tool for running Yeoman generators

Vs code/cursor 开发插件

可以安装下这个:Microsoft Office Add-ins Development Kit
06ed2b1e5c337d53818b449c6a6ead71_MD5
当然也可以用 npm start,不过运行前一定要记得先运行 npm run dev-server,要不然只是 start 个客户端、背后没服务是跑不起来的。如果一直失败,那直接把所有在 run 的都关掉,word 也退出,运行几次 npm stop (因为我也遇到了,当时运行了好几次 start,它起了多个背后的进程)。所以其实用插件还是比较方便些,命令行可能会遇到一些想不通的问题。

用命令行如果遇到问题,可以参考这里:Build your first Word task pane add-in - Office Add-ins | Microsoft Learn

Script Lab

Script Lab 是一种用于快速创建调用 Office JavaScript 库 API 的“原型代码”。

Script Lab is a tool for quickly prototyping code that calls the Office JavaScript Library APIs.

  • 安装时,公司账号可能会用不了,可能跟公司的安全策略有关。最好切换个人账号。
    481f65c8228eb4e2a18b297bba34e058_MD5
    可以到 这里这里 来直接下载安装,需要登录,这里如果用公司的账号可能会失败,可以尝试下个人的账号。如果是走的公司内部的采购,有个小技巧:公司内部申请下来之后,用它激活,然后退出登录自己的账号,我这么测试了下,用自己账号依然保持着激活状态,看来它激活的是软件本身,跟账号没关系。
    第一次登录 AppSource 的话,会有一堆流程,一会儿要认证,一会儿要补充信息……
    a5222986bf0607d4b24cef11d34a7e99_MD5
    6ce02359d39da2d74996140ea160c735_MD5
    装完之后,打开 word 就可以看到了:
    02913cb0e00b47cca7a08800297d3910_MD5

运行

运行起来后,如图所示:
b71eb2e0a6e37ecb7264538e8b0e8e3c_MD5
Word 是自己弹出来的,vscode 插件背后是起了一个 server (默认在 3000 端口),为侧边这个“页面”提供调试服务。

限制

从生成的代码中可以看出,微软对 Add-ins 其实做了一些环境限制:
8933d8a34dc9ebc2133a5ddb8bbcc6b7_MD5
只有 IE 和 Edge 浏览器内核才能跑,当然 Office 版本也有限制,这个倒还好。

相关资源

Built with Hugo
Theme Stack designed by Jimmy