WPS加载项实战：从零构建AI办公助手

1. 为什么需要AI办公助手每天处理大量文档的办公族最头疼的就是重复性文字工作。我见过不少同事加班到深夜就为了写会议纪要、整理报告数据或者润色商务邮件。这些工作其实特别适合AI来帮忙——大模型能自动生成文本、提炼重点、改写语句甚至帮你检查语法错误。WPS作为国内使用最广的办公软件去年开放了加载项开发接口。这意味着我们可以把AI能力像插件一样装进WPS直接在文档里调用。想象一下选中一段话就能让AI帮你重写点击按钮自动生成报告框架这些都不需要切换其他软件就能完成。2. 开发环境搭建2.1 基础工具准备首先确保你的电脑上有这些工具Node.js 16建议用LTS版本WPS 2019及以上个人版/专业版都行代码编辑器VS Code或WebStorm安装WPS官方开发工具包特别简单打开命令行输入npm install -g wpsjs这里有个坑要注意Windows用户一定要用cmd命令行PowerShell可能会报错。安装完成后试试输入wpsjs -v能显示版本号就说明环境配好了。2.2 创建第一个项目用这个命令初始化项目wpsjs create AIDocHelper你会看到交互式选项选择加载项类型选文字选择UI框架推荐Vue 3是否启用TypeScript新手可以先选否项目生成后目录结构是这样的AIDocHelper/ ├── public/ # 静态资源 ├── src/ # 主要代码 │ ├── taskpane/ # 侧边栏UI │ └── ribbon.js # 工具栏按钮逻辑 └── vite.config.js # 构建配置启动调试模式wpsjs debug这时候WPS会自动打开一个新文档。如果没看到加载项去菜单栏找工具→WPS加载项勾选你的插件名称。我第一次用时重启了三次才成功这是WPS的玄学问题多试几次就好。3. 对接AI能力3.1 调用大模型API以硅基流动的API为例在src/api.js里写个简单的调用函数export async function generateText(prompt) { const response await fetch(/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer YOUR_API_KEY }, body: JSON.stringify({ model: siliconflow-1.0, messages: [{ role: user, content: prompt }] }) }); return await response.json(); }这里有个关键技巧直接在Vite配置里设置代理避免跨域问题。修改vite.config.jsserver: { proxy: { /v1: { target: https://api.siliconflow.cn, changeOrigin: true, rewrite: path path.replace(/^\/v1/, ) } } }3.2 实现核心功能在侧边栏组件(taskpane.vue)里添加这些实用功能智能改写async function rewriteSelection() { const text await Application.Selection.Text; const result await generateText(请改写这段文字${text}); Application.Selection.Text result.choices[0].message.content; }会议纪要生成async function generateMinutes() { const notes await Application.ActiveDocument.Range().Text; const prompt 请将以下会议记录整理成正式纪要\n${notes}; // 插入到文档末尾 Application.ActiveDocument.Range().InsertAfter(await generateText(prompt)); }实测发现给AI的指令越具体效果越好。比如要生成周报可以这样写提示词请用三点总结本周工作 1. 项目进展[自动填充] 2. 存在问题[自动填充] 3. 下周计划[自动填充] 保持专业商务风格每点不超过2行4. 界面交互优化4.1 侧边栏设计建议采用这种布局侧边栏顶部常用功能按钮生成/改写/翻译 中间区域历史记录列表 底部API状态指示灯设置入口用Vue实现一个带记忆功能的对话界面template div classchat-container div v-for(item,index) in history :keyindex div classuser-msg{{ item.question }}/div div classai-msg{{ item.answer }}/div /div textarea v-modelcurrentInput/textarea button clicksubmit生成/button /div /template4.2 右键菜单集成在ribbon.xml里添加上下文菜单contextMenus contextMenu idMsoContextMenuText button idRewriteWithAI labelAI智能改写 onActionrewriteSelection/ /contextMenu /contextMenus这样在文档里选中文字时右键菜单直接出现AI功能选项比找侧边栏按钮快得多。5. 部署方案选择5.1 离线部署适合个人使用打包项目wpsjs build --offline生成发布文件wpsjs publish --offline把生成的dist文件夹和publish.html复制到C:\Users\[用户名]\AppData\Roaming\kingsoft\wps\jsaddons这样同一台电脑上的所有WPS都能用到这个加载项。我测试过200MB的文档处理速度比在线版快30%左右。5.2 在线部署团队共享用Docker部署最省事这里分享我的Nginx配置模板server { listen 80; server_name your-domain.com; location / { root /usr/share/nginx/html; try_files $uri $uri/ /index.html; } location /v1/ { proxy_pass https://api.siliconflow.cn/v1/; proxy_set_header Host $host; proxy_http_version 1.1; } }关键是要处理好HTTPS证书。用Lets Encrypt免费证书配上自动续期certbot --nginx -d your-domain.com6. 实际使用技巧性能优化文档超过50页时建议分段处理。我封装了个分块函数async function processLargeDoc(chunkSize 5000) { const fullText Application.ActiveDocument.Range().Text; for (let i 0; i fullText.length; i chunkSize) { const chunk fullText.substr(i, chunkSize); // 处理分块... } }错误处理网络不稳定时自动重试async function safeGenerate(prompt, retries 3) { while (retries--) { try { return await generateText(prompt); } catch (e) { await new Promise(resolve setTimeout(resolve, 1000)); } } throw new Error(API请求失败); }快捷键绑定在ribbon.js里添加function onKeyDown(event) { if (event.keyCode 119 event.ctrlKey) { // CtrlF8 rewriteSelection(); } } Application.addEventListener(DocumentKeyDown, onKeyDown);最近给部门部署了这个方案后最受欢迎的居然是自动生成Excel公式的功能。比如在WPS表格里选中数据区域点分析按钮AI就会自动写VLOOKUP或者SUMIFS公式比手动写效率高多了。