WPSJS加载项之实现Echarts嵌入WPS

wodewan

说明：更新了如何使用服务器在线版本的操作步骤，有兴趣的可以移步16楼。

前言：
Excel或Wps表格加载项可以通过很多种方式实现，其中与程序的交互的接口大多数都是Com或Xll的C接口，WPS的JS接口的加载项功能已经推出已经有一段时间了，作为一种尝试，简单记录一些个人感觉好用的地方，供有兴趣的坛友参考。

    1. 相比于JSA而言，可以使用JS的第三方库和生态系统。
    2. 可以自定义导航面板和弹出对话框，页面均为HTML页面，非JSA的窗体
    3. 因为wps内置了Chromium ，实现了浏览器原生对象和WPS内置对象的融合
    4. 可以很方便的进行部署，只需将开发好的文件copy到对应的文件夹中即可
    5. 无需安装任何插件，纯html+js+css既可实现，文件体积也小，附件解压后600K左右：

示例：
一个简单的示例程序如下：

    1. 测试数据：WPS加载项与WPS表格的交互，数据的写入和读写。（完全的wps对象模型和事件机制）
    2. Echarts：WPS加载项创建导航面板与自定义界面Html页面和本地JS的交互（实现自定义html，css，js的界面和功能）
    3. 正则表达式：WPS加载项与外部网页的交互（直接加载了外部网页regex工具内嵌到wps的面板中）
    4. 对话框：WPS加载项创建对话框与本地文件的交互（可以使用file模块与本地文件进行交互）




安装与卸载：
注意：本插件为特殊离线版本，无需搭建服务器，和修改配置文件，注册表，附件只作为演示插件功能使用：
其实就是拷贝源文件到%appdata%\kingsoft\wps\jsaddons文件夹下，
附件为上述示例的自解压包，也可以做成inno安装包实现更方便的安装和卸载。
    1、加载插件：可使用自解压包一键加载或自行解压,重启WPS即可。
    2、卸载插件：直接删除上述文件夹中的文件即可。
演示如下：

静听溪流

感谢分享   点赞支持

wodewan

接下来，简单介绍一下如何跑通这个流程，开发wps的js加载项和vba或jsa这种集成环境不同，需要一些额外的开发环境，所以第一步搭建开发环境：

一、环境配置：
1. 注意这里的环境配置指的是进行JS插件开发的环境，非使用环境。
2. 对于开发环境，官网有详细的介绍，这里挑出几个必要项：
    2.1 Node.js
    2.2 wps软件及wpsjs开发工具包
    2.3 VsCode 编辑器
3. Node和Vscode的安装网上教程很多，不做介绍，安装完成后在Vscode终端或系统终端敲入 node -v 若出现一串数字表明安装成功（版本号无所谓）：

   
4. 有了node，就可以使用npm命令安装wpsjs开发工具包，命令为：npm install -g wpsjs 安装成功后，使用 wpsjs --version，出现如下界面表明安装成功：
   
5. 至此，整个开发环境已经搭建完成，接下来就可以进行wps的js加载项开发了。

wodewan

二、架构的搭建

     还记得环境配置中，安装的wpsjs工具包吗？可以使用wpsjs create 项目名来创建一个wpsjs的官方demo，比较全面，包含了js加载项的很多功能，但如果首次学习js加载项，特别是对前端项目不熟悉的话，难免有点劝退，所以，重点来了，本次我们不使用官方的工具包，而是从一个空文件夹开始，一步一步实现一个最简单的加载项。
1. 第一步，新建一个空的文件夹，比如就叫Demo，作为项目文件夹，进入这个文件夹，然后用vscode打开这个文件夹。

2. 首先对这个文件夹进行初始化，初始化命令：npm init -y ,如果你发现文件夹中多出一个package.json的文件，说明项目已经初始化成功了。接着使用npm来安装wps的依赖命令如下：npm install wps-jsapi --save-dev，不安装这个开发依赖包，在vscode中将无任何智能提示。自此，我们所有的开发环境就全部搭建完成了。

3. 下一步就是添加入口的index.html文件和index.js文件，注意html中要引用index.js,以及ribbon.xml用于自定义Ribbon区的显示方法如下：

4. 现在基本的文件已经全部有了，下面就是功能实现了，这里我们实现两个功能，显示一个Ctp面板和一个简单的提示框。Ribbon的定义如下，这个其实和VBA或其他方式定义Ribbon一样，这里有OnAddinLoad加载回调，和一个按钮OnTest，将在index.js 对这2个函数进行简单的实现：

5.其实到这里基本上已经完成了大部分，上面的演示中有个需要注意的地方就是Ribbon的所有回调函数必须有一个返回值，Ontest漏写了，同时我们可以copy一个svg的图片到目录下用于按钮的显示，同时实现GetImage的回调，最后使用命令：wpsjs debug来测试一下：


至此，可以发现，wps已经能够正确加载我们自定义的加载项并成功运行定义的函数了，剩下的就可以官网查找各种wps的api的使用方式，实现各种功能。
最后，总结一下，其实WPSjs的加载项就是通过一个Ribbob文件定义功能区，一个index.html和index.js作为入口，实现了使用网页做UI，js做后台，以上个人的一点小小的使用过程分享，若有错误还请各位坛友指正。

wanghan519

感谢大佬，这个确实好用
最近也在尝试，只是js加载项如果要随着表格内容变化而实时变化，有什么好办法吗，现在是用死循环每隔一段时间检查一下，想知道有没有像处理js事件那种方式，多谢

wodewan

wanghan519 发表于 2023-12-25 04:57
感谢大佬，这个确实好用
最近也在尝试，只是js加载项如果要随着表格内容变化而实时变化，有什么好办 ...

xd3210

好资料，收藏学习。谢谢分享！

xd3210

生成Echart图表的文档发送给其他用户(没有安装加载项)，Echart能正常显示吗？

zpy2

xd3210 发表于 2023-12-25 09:13
生成Echart图表的文档发送给其他用户(没有安装加载项)，Echart能正常显示吗？

https://club.excelhome.net/forum.php?mod=viewthread&tid=1594975&extra=&mobile=
https://club.excelhome.net/forum.php?mod=viewthread&tid=1601466&pid=10797196&page=1&_dsign=ab73321f&extra=&mobile=2#pid10797196
可以把环境放到服 务 器，本身就是一个js页面

zpy2

不错，不过打包到exe,手机这里没法解压拉。