DEV Community

Charles Zhang
Charles Zhang

Posted on

WPS AI 时代的插件开发：软件工程师如何用 JSAPI 构建智能办公自动化

#wpsjsapi #aiofficeautomation #plugindevelopment #javascript

WPS AI 时代的插件开发：软件工程师如何用 JSAPI 构建智能办公自动化

背景：办公软件正在被 AI 重构

WPS Office 已经不只是文档编辑器。随着 WPS AI 能力开放，软件工程师可以通过 WPS JSAPI 把大模型、知识库、自动化流程嵌入到文档、表格和演示中。对于企业来说，这意味着可以在熟悉的 WPS 界面里完成合同审查、数据清洗、周报生成、会议纪要整理等任务。建议先从 WPS官网 了解开发文档，并通过 WPS下载 安装最新版 WPS Office，确保加载项能力完整。

为什么选择 WPS JSAPI

WPS JSAPI 是一套基于 JavaScript 的插件开发接口。它可以操作文档、表格、演示、窗口、事件和 Ribbon 控件。与 VBA 相比，JSAPI 更适合现代前端工程：可以使用 npm、TypeScript、Vite、React，也更容易接入 HTTP API 和 AI 服务。核心对象通常包括：

  • wps.WpsApplication()：获取 WPS 应用对象
  • Application.ActiveDocument：当前文档
  • Application.Selection：当前选区
  • Document.Range()：文档范围
  • Application.AddTaskPane()：任务窗格
  • Application.ApiEvent：事件监听

开发准备

  1. 从 WPS官网 获取开发者文档和示例。
  2. 通过 WPS下载 安装最新版 WPS Office。
  3. 安装 wpsjs CLI： 
npm install -g wpsjs
Enter fullscreen mode Exit fullscreen mode
  1. 创建项目： 
wpsjs create wps-ai-plugin
cd wps-ai-plugin
wpsjs debug
Enter fullscreen mode Exit fullscreen mode

调试模式下，WPS 会加载本地插件，修改前端代码后可以热更新。正式发布前，使用 wpsjs publish 生成加载包。

插件结构示例

一个典型 WPS 加载项包含 manifest、前端页面和业务脚本：

wps-ai-plugin/
  manifest.xml
  index.html
  src/
    main.js
    ai-service.js
    ribbon.js
Enter fullscreen mode Exit fullscreen mode

manifest 用于声明插件名称、类型、入口地址和 Ribbon 按钮。属性可以使用单引号：

<jsapi>
  <name>wps-ai-assistant</name>
  <type>wps</type>
  <url>http://localhost:5173</url>
  <ribbon>
    <tab id='aiTab' label='AI 助手'>
      <button id='summarizeBtn' label='智能摘要' onAction='aiSummarize' />
    </tab>
  </ribbon>
</jsapi>
Enter fullscreen mode Exit fullscreen mode

核心：读取文档并调用 AI

下面示例展示如何获取选区文本，调用后端 AI 接口，再把摘要写回文档：

async function aiSummarize() {
  const app = wps.WpsApplication();
  const doc = app.ActiveDocument;
  const selectionText = app.Selection.Text;

  if (!selectionText || selectionText.trim().length === 0) {
    alert('请先选择一段文本');
    return;
  }

  const res = await fetch('https://api.example.com/ai/summarize', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text: selectionText })
  });
  const data = await res.json();

  const end = doc.Content.End - 1;
  doc.Range(end, end).Text = 'AI 摘要：' + data.summary;
}
Enter fullscreen mode Exit fullscreen mode

这段代码没有直接暴露 API Key。生产环境建议由后端代理 AI 请求，并在服务端做鉴权、限流、审计和脱敏。

用任务窗格承载 AI 交互

比弹窗更友好的方式是任务窗格。可以在 WPS 右侧打开一个 Web 页面，里面用 React 或 Vue 实现聊天界面：

function openAiPane() {
  const app = wps.WpsApplication();
  app.AddTaskPane('AI 助手', 'http://localhost:5173/panel.html');
}
Enter fullscreen mode Exit fullscreen mode

任务窗格适合做连续对话、模板选择、结果预览和插入。用户不需要离开 WPS，就能完成“选中内容 -> AI 处理 -> 回写文档”的闭环。

AI 集成模式

1. 同步短请求

适合摘要、翻译、改写、标题生成等短文本任务。优点是实现简单，缺点是等待时间明显。

2. 流式输出

如果后端支持 SSE 或 WebSocket，可以在任务窗格中逐字显示结果，最后再写入文档。体验更接近主流 AI 产品。

3. 表格批量处理

在 WPS 表格中，可以遍历选区，把每一行发给 AI，再写回结果列。注意控制并发，避免触发 API 限流。

async function batchTranslate() {
  const app = wps.WpsApplication();
  const sheet = app.ActiveSheet;
  const range = app.Selection;

  for (let row = 1; row <= range.Rows.Count; row++) {
    const cell = range.Cells.Item(row, 1);
    const text = cell.Text;
    if (!text) continue;
    const translated = await translateText(text);
    range.Cells.Item(row, 2).Value2 = translated;
  }
}
Enter fullscreen mode Exit fullscreen mode

工程化建议

  • 使用 TypeScript 定义 AI 请求和响应结构。
  • 把 WPS JSAPI 调用封装成适配层，便于单元测试。
  • 对长文档做分块，避免超出模型上下文。
  • 对 AI 返回内容做 Markdown 清洗，再写入 WPS 文档。
  • 处理错误和超时，不要让插件卡死 WPS。
  • 记录关键操作日志，满足企业审计要求。

发布与分发

开发完成后，可以通过 WPS官网 的开发者平台提交插件，也可以在企业内部分发。最终用户只需通过 WPS下载 安装 WPS Office，然后安装插件包。发布前重点检查：

  • manifest 中的入口地址和权限声明
  • HTTPS 与域名白名单
  • API Key 是否只存在服务端
  • 是否兼容不同版本的 WPS
  • 是否提供离线降级方案

总结

WPS AI 时代，插件不再只是宏的替代品，而是智能办公自动化的入口。软件工程师可以用 WPS JSAPI 把文档、表格、演示与 AI 能力连接起来，构建合同审查、数据洞察、报告生成、知识问答等场景。建议从 WPS官网 获取最新文档，通过 WPS下载 安装最新版 WPS，然后从一个最小可用插件开始：读取选区、调用 AI、回写结果。这个闭环一旦跑通，就能快速扩展到更复杂的办公自动化流程。

Top comments (0)