| WPS加载项开发和离线加载项本地安装方法、在线部署 | 您所在的位置：网站首页 › office2007pdf加载项下载地址 › WPS加载项开发和离线加载项本地安装方法、在线部署 |
WPS加载项开发和离线加载项本地安装方法、在线部署
|
WPS加载项本质就是一个网页，每个加载项对应打开一个网页，因此需要有js、node.js基础知识和大概了解Application对象模型。另外WPS加载项支持Vue、React框架开发项目。 在线 / 离线加载项都不需要用户安装nodejs环境 服务器（没钱续费，地址失效了）部署演示：https://serve-huaermeier.inscode.cc/wps/addon 离线加载项安装包：https://download.csdn.net/download/huaermeier/88283547 效果演示
目录 一、准备环境 1.1、测试npm包管理是否正常显示版本号 1.2、安装wpsjs开发工具包 二、项目开发 2.1、创建Excel加载项 2.2、JS调试器 2.3、加载项名称、类型和版本号 2.4、customUI自定义功能区 2.5、离线加载项网络请求 三、加载项离线安装和在线部署 安装离线加载项 3.1、打包离线加载项 3.2、编辑publish.html 3.3、安装加载项 服务器部署 / publish模式 4.1、打包在线加载项 4.2、Express框架搭建服务器 4.3、上传文件到serve项目 4.4、更改加载项服务器地址 一、准备环境软件安装非常简单，官网下载安装包，默认下一步/一键安装即可 安装WPS 尽量用新版本 安装node.js 推荐v16版本 win7最高支持v12版本 安装Visual Studio Code代码编辑器 win7最高支持v1.7版本 1.1、测试npm包管理是否正常显示版本号1.打开cmd输入命令测试版本号 npm -v2.首次安装nodejs，npm默认国外镜像，包下载较慢时，可切换到国内镜像 //下载速度较慢时可切换国内镜像 npm config set registry https://registry.npmmirror.com //国内镜像不可用时，恢复官方镜像 npm config set registry https://registry.npmjs.org 1.2、安装wpsjs开发工具包全局安装命令：npm install -g wpsjs 以前安装过可以用更新命令：npm update -g wpsjs 显示帮助信息命令：wpsjs -h
1.在桌面目录下创建一个名称为wpsai的加载项实例 wpsjs create wpsai2.提示选择加载项类型，利用方向键选择电子表格，UI框架选择无 cd wpsai 命令进入加载项目录 wpsjs debug 命令启动加载项进行调式，按下Ctrl + C可停止调式
提示：Vue框架调试项目可能会因为openssl报错导致无法启动 //解决方法1：在终端或cmd输入 //Linux & Mac OS： export NODE_OPTIONS=--openssl-legacy-provider //Windows： set NODE_OPTIONS=--openssl-legacy-provider //解决方法2. package.json增加配置 "scripts": { "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve", "build": "vue-cli-service build" } 2.2、JS调试器打开JS调试器 > 控制台 可以直接访问Application对象模型，方便查看执行结果 比如在控制台调用FileSystem对象创建txt文件，写入字符串数据；设置列宽和行高 //在桌面创建txt文件，并写入字符串test let app = Application let path = app.Env.GetHomePath() app.FileSystem.WriteFile(`${path}/Desktop/test.txt`, 'Hello WPS-Addon') //设置列宽和行高 let sh = app.ActiveSheet sh.Columns.Item('A:F').ColumnWidth = 12 sh.Rows.Item('1:5').RowHeight = 36 //单元格赋值 let data = ['Hello', 'WPS-Addon'] sh.Range('A1').Resize(1, 2).Value2 = data 2.3、加载项名称、类型和版本号
加载项目录找到ribbon.xml
属性 作用 id 标签/控件唯一标识 lable 标签/控件显示的名称 onAction 事件发生时执行的函数名称 getEnabled 执行函数OnGetEnabled控制激活/冻结 getImage 执行函数GetImage获取图标 visible 显示或隐藏控件可选属性true或false size 控件尺寸可选属性large或normal idMso WPS内置控件标识，具体参考WPS官方文档idMso列表
由于WPS通过file协议启动离线加载项，发送请求存在跨域问题，解决办法： 在服务端设置header授权不同源的客户端进行跨域请求 setHeader('Access-Control-Allow-Origin', '*') //nodejs服务端代码实例 const http = require('http') http.createServer((req, res) => { const data = { message: '离线插件发送请求示例' } res.setHeader('Access-Control-Allow-Origin', '*') res.setHeader('Content-Type', 'application/json') res.end(JSON.stringify(data)) }).listen(80, () => console.log('server running at http://127.0.0.1')) //离线加载项发送请求示例 fetch('http://127.0.0.1', { method: 'GET', mode: 'cors', //设置cors }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)) 三、加载项离线安装和在线部署注意！加载项只能从离线插件和在线插件二选一，如果已经安装了在线加载项，再安装离线加载项应该会失败 安装离线加载项WPS内置浏览器通过file协议直接打开保存在本地的html文件启动加载项，因此打包好离线加载项再改好publish.html文件发给用户自行安装即可。 3.1、打包离线加载项1.打包命令：wpsjs build，选择离线插件 2.发布命令：wpsjs publish，服务器地址随便填，后期要改代码 3.新建一个文件夹，文件夹名称和路径随意，把wpsai.7z和publish.html文件放进去即可
找到LoadPublishAddons函数的位置修改代码并保存 完成之后发给用户，用户通过浏览器打开publish.html文件安装，再把压缩包文件解压到jsaddons目录即可使用 function LoadPublishAddons() { var addonList = document.getElementById("addonList"); //publish.html文件的路径位置不同，url也会跟着不同，增加这行代码 var addonPath = location.href.match(/.+\//)[0] + 'wpsai.7z' var curList = [{"name": "wpsai","addonType": "et","online": "false","multiUser": "false","url": addonPath,"version": "1.0.0"}]; curList.forEach(function(element) { var param = JSON.stringify(element).replace("\"", "\'"); UpdateElement(element, 'enable') }); }
1.用浏览器打开publish.html文件，点击安装加载项
2.把wpsai.7z解压到jsaddons目录，输入cmd命令可快速打开该文件夹 注意！解压的文件夹名称格式必须是加载项名称 + _ + 版本号，例如：wpsai_1.0.0 start %Appdata%\kingsoft\wps\jsaddons
到这里离线加载项已经安装在本地可以使用了，根据加载项类型打开WPS的 Excel Word PPT查看加载项是否启动 服务器部署 / publish模式把加载项文件和publish.html文件上传到服务器即可，在线加载项的安装、卸载、禁用统一在publish.html页面管理 4.1、打包在线加载项1.打包加载项时，选择在线插件 2.输入命令：wpsjs publish 发布加载项 提示输入服务器地址，先随便填后期再从publish.html文件上更改，例如本机ipv4地址：192.168.16.103:3000/ 局域网使用建议在路由器设置固定ip地址并绑定服务器电脑的mac地址，然后在服务器电脑上设置防火墙入站规则开放端口 上述步骤将会得到的wps-addon-build文件夹和publish.html文件
1.全局安装express脚手架，安装完成输入express -h显示帮助信息 npm install -g express-generator2.创建名称为serve的Express应用 express --view=ejs serve3.根据提示依次输入命令启动项目，浏览器打开127.0.0.1:3000或者本机ip地址访问项目
把加载项wps-addon-build文件夹和publish.html文件放到serve项目的public目录里， 再把wps-addon-build文件夹重命名为wpsai
编辑publish.html代码，找到LoadPublishAddons函数改代码 因为wpsai加载项托管在public目录下， 服务器地址应改为本机ip地址：http://192.168.16.103:3000/wpsai/ 后续可以添加多个加载项项目、更改加载项服务器地址
加载项服务器部署完毕，管理加载项从浏览器打开192.168.16.103:3000/publish.html |
【本文地址】