加载项从入门到上线(一)

我不明白,为什么都2025了,还有人不知道WPS的加载项开发

今天我就手把手教你怎么一步步开发加载项并发布


首先安装环境

node去这里下载 https://nodejs.org/zh-cn

然后安装wpsjs

💡

npm install -g wpsjs --registry=https://registry.npmmirror.com

我的环境是这样的

先用wpsjs创建一个工程,我们今天写一个表格的加载项

💡

wpsjs create HelloWps

Vue

用编辑器打开这个工程,安装依赖

💡

npm install

预览一下效果

💡

wpsjs debug

修改ribbon.xml,添加一个功能,插入图片和生成二维码

💡

<button id="btnInsertImage" label="插入图片" onAction="ribbon.OnAction" enabled="true" getImage="ribbon.GetImage" getVisible="ribbon.OnGetVisible" size="large"/>

<button id="btnqrcode" label="生成二维码" onAction="ribbon.OnAction" enabled="true" getImage="ribbon.GetImage" getVisible="ribbon.OnGetVisible" size="large"/>

重新 wpsjs debug

写逻辑处理

插入图片需求

💡

工作表同级有很多图片,我们根据文件和行号匹配,插入到指定列下,如果没有选择列,则默认插入第一列

插入图片逻辑

因为要操作本地文件,我们需要先了解一下相关文档,

WPS加载项的文档在 https://open.wps.cn/previous/docs/client/wpsLoad

我们现在要用Filesystem 相关的

处理逻辑

看下效果

生成二维码

这个明天单独再发个帖子来,中午要休息一下

投票了解一些信息(4选4)
  • 有没有上线过加载项 0
  • 有没有写过加载项 0
  • 会不会javascript 0
  • 都没了解过 0
0人参与 投票已截止
广东省
浏览 473
4
5
分享
5 +1
17
4 +1
全部评论 17
 
学习
· 河南省
回复
 
失败了。npm install 下载成功 在 wpsjs debug 里报错了 说少了typescript模块。
· 广东省
回复
奇怪了 我单独下载typescript模块就好了 npm install 难道不包含 typescript模块吗?
· 广东省
回复
 
大佬,这个可以写个公式么。公式的话,这个写法是怎么写的
· 河南省
回复
wils

创作者俱乐部成员

需要最新win版wps,Linux等还没更新 wps.AddCustomFunction注册函数就行
· 海南省
回复
 
学习
· 广东省
回复
 
图标是哪里找的呢
· 重庆
回复
什么图标
· 广东省
回复
 
Tam Kingsley

创作者俱乐部成员

向老师们学习
· 广东省
回复
 
wps新路

WPS函数专家

厉害,向大佬学习
· 重庆
回复
 
wils

创作者俱乐部成员

赞👍 哈哈,早知道你要写我就不费那劲了 接触过前端的肯定早就上手了 怕就怕没用过vscode和命令行的新手 只能说官方文档太简陋了
· 广东省
回复
你们那个标是怎么来的?
· 广东省
回复