WPS加载项开发流程以及离线部署

Sue_768

于 2025-06-10 02:00:00 发布

阅读量650

点赞数 3

CC 4.0 BY-SA版权

分类专栏： wps插件文章标签： wps wps插件开发

本文链接：https://blog.csdn.net/weixin_65861329/article/details/148531282

wps插件专栏收录该内容

1 篇文章

订阅专栏

在当今数字化办公的大环境下，WPS 作为广泛使用的办公软件套件，其插件开发为用户提供了高度定制化办公功能的可能性。本文将深入探讨 WPS 插件的开发流程，并详细阐述离线部署方案。

1.什么是WPS加载项？

WPS加载项是一种可嵌入到WPS Office中的扩展功能。加载项可以集成到WPS的Word、Excel、PPT等应用程序中，通过自定义界面、按钮或功能，来实现特定的业务需求。WPS加载项与Office加载项类似，支持HTML、CSS、JavaScript等技术，开发者可以通过这些前端技术来编写加载项的界面和逻辑。

2.WPS加载项开发流程

开发WPS加载项的流程一般可以分为以下几个步骤：

2.1 环境准备

安装WPS Office：首先要在本地安装WPS Office。确保WPS是最新版本，并且支持加载项开发。
配置开发环境：需要安装基本的Web开发工具，VS Code、Chrome、Nodejs、npm。（如果不知道怎么安装，自行百度）

2.2 使用脚手架创建加载项项目

安装wpsjs

 npm install -g wpsjs

创建项目

wpsjs create wps-plugin-test

选择加载项类型

回车下一步

2.3 项目启动以及调试

进入项目，安装依赖

cd wps-plugin-test && npm i

如果npm无法安装依赖就安装一个yarn，使用yarn去安装依赖
使用vscode打开项目

调试

wpsjs debug

输入这段命令之后会自动唤醒wps

3.WPS加载项离线部署

3.1 编译项目包

使用wpsjs 编译包

wpsjs build

选择离线插件

打包好就可以看到构建好的压缩包

3.2 创建publish页面

运行wpsjs publsih页面

wpsjs publish

填入123/，后续我们要改动这个页面

执行完之后可以看到左侧面板有出现这个publish页面

修改publish.html ,替换LoadPublishAddons方法

替换内容如下

function LoadPublishAddons() {
  var addonList = document.getElementById("addonList");

  //publish.html文件的路径位置不同，url也会跟着不同，增加这行代码
  var addonPath = location.href.match(/.+\//)[0] + 'wps-plugin-test.7z'
  var curList = [{ "name": "wps-plugin-test", "addonType": "wps", "online": "false", "multiUser": "false", "url": addonPath, "version": "1.0.0" }];
  curList.forEach(function (element) {
    var param = JSON.stringify(element).replace("\"", "\'");
    UpdateElement(element, 'enable')
  });
}

注意：这个方法中的 wps-plugin-test.7z 这个压缩包名，要跟打包出来的名字一致