wpsjs插件开发-采用js和wps交互功能_wps插件开发-程序员宅基地

技术标签: wpsjs  前端  flask  javascript  开发语言  

wpsjs-开发wps插件,可以通过web的js调用本地的wps并做指定功能
在这里插入图片描述

WPS 加载项是一套基于 Web 技术用来扩展 WPS 应用程序的解决方案。每个 WPS 加载项都对应打开了一个网页,并通过调用网页中
JavaScript 方法来完成其功能逻辑。 WPS 加载项打开的网页可以直接与 WPS 应用程序进行交互,同时一个 WPS
加载项中的多个网页形成了一个整体, 相互之间可以进行数据共享。 开发者不必关注浏览器兼容的问题,因为 WPS 加载项的底层是以
Chromium 开源浏览器项目为基础进行的优化扩展。 WPS
加载项具备快速开发、轻量化、跨平台的特性,目前已针对Windows/Linux操作系统进行适配。 WPS 加载项功能特点如下:
完整的功能。可通过多种不同的方法对文档、电子表格和演示文稿进行创作、格式设置和操控;通过鼠标、键盘执行的操作几乎都能通过WPS 加载项
完成;可以轻松地执行重复任务,实现自动化; 三种交互方式。 自定义功能区,采用公开的CustomUI标准,快速组织所有功能;
任务窗格,展示网页,内容更丰富; Web 对话框,结合事件监听,实现自由交互。 标准化集成。不影响 JavaScript
语言特性,网页运行效果和在浏览器中完全一致;WPS 加载项开发文档完整,接口设计符合 JavaScript
语法规范,避免不必要的学习成本,缩短开发周期。

开源地址:https://gitee.com/zuiyuewentian/wpsjs_demo.git
官方接口文档:https://qn.cache.wpscdn.cn/encs/doc/office_v11/index.htm

后端采用python-flask开发 技术采用python+flask,主要目的,

从页面调起wps,插件自动化安装,并将文件和相关使用的参数全部传入
监听wps插件上传文件,监听wps传入相关消息和事件 https://gitee.com/zuiyuewentian/wpsjs_demo/tree/master/server

插件开发内容:
https://gitee.com/zuiyuewentian/wpsjs_demo/tree/master/plugin

集成功能:

1.按钮功能开发
2.保存到本地
3.隐藏tab项目
4.插件和前端通信
5.插件和后端通信
6.web调用插件打开文件,传递参数
7.通过插件保存文件到服务器
8.插入书签内容
9.监听wps操作事件等

常用wpsjs命令 准备开发环境 安装wps 安装Node.js
1.管理员权限(如果安装的是wps个人版,不需要管理员权限)启动命令行,通过npm全局安装wpsjs开发工具包: 安装命令: npm install -g wpsjs, 如果之前已经安装了,可以检查下wpsjs版本,更新wpsjs的命令为:npm update -g
wpsjs
2.新建一个wps加载项,假设这个wps加载项取名为"HelloWps"。 输入命令: wpsjs create HelloWps, 会出现如下图的几个选项:
3通过上下方向键可以选择要创建的wps加载项的类型,如果选择“文字”,则创建的加载项会在wps文字程序中加载并运行,
同理选择“电子表格”,则会在wps表格中运行,这里假设我们选择的是“文字”,按Enter健确定。
4.选择示例代码的代码风格类型 wpsjs工具包提供了两种不同代码风格的示例,“无”代表示例代码中都是原生的js及html代码,没有集成vue\react等流行的前端框架。
"Vue"代表生成的示例代码集成了Vue相关的脚手架,在实际的项目中选用Vue基于示例代码可能更适合做工程化的开发,感兴趣的同学可以两种都尝试一下。
这里我们选择“无”,按Enter健确认。
确认后wpsjs工具包会在当前目录下生成一个HelloWps的文件夹,我们进入到此文件夹,可以看到HelloWps的相关代码已经生成:
备注:wpsjs工具包为示例代码中有一个package.json文件,这是node工具标准的配置文件,其中有一个依赖包为wps-jsapi,
这个依赖包是wps支持的全部接口的TypeScript描述,方便在vscode中敲代码时,提供代码联想功能,由于wps接口会跟随业务
需求不断更新,因此当发现代码联想对于有些接口不支持时,通过 npm update --save-dev
wps-jsapi命令定期更新这个包。

总结命令:
1.创建 wpsjs create
2.加载项目 wpsjs join
3.本地调试 wpsjs debug
4.构建离线版 wpsjs build
5.构建发布版 wpsjs publish

安装完成后:

1.先访问publish页面在线安装插件
在这里插入图片描述

2.访问要操作的页面,点击新建客户端打开文件,会自动调起本地的wps并加载test.docx文件
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zuiyuewentian/article/details/125886250

智能推荐

汇编语言 十六进制转换为二进制_十六进制转二进制小程序-程序员宅基地

文章浏览阅读2.5w次,点赞26次,收藏148次。汇编语言程序,十六进制转换为二进制_十六进制转二进制小程序

51nod-1279 扔盘子_51nod - 1279-程序员宅基地

文章浏览阅读364次。1279 扔盘子题目来源: Codility基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注有一口井,井的高度为N,每隔1个单位它的宽度有变化。现在从井口往下面扔圆盘,如果圆盘的宽度大于井在某个高度的宽度,则圆盘被卡住(恰好等于的话会下去)。盘子有几种命运:1、掉到井底。2、被卡住_51nod - 1279

消融实验的目的_深度学习中为什么采用消融实验-程序员宅基地

文章浏览阅读307次。消融实验就是通过出去模型的某一模块或者是功能,然后与原来的模型进行比较运行结果,即削弱系统的某个组件后使其继续正常运行_深度学习中为什么采用消融实验

【linux】nvidia-smi 查看GPU使用率100%_centos gpu没跑程序使用率100%-程序员宅基地

文章浏览阅读5.5k次,点赞4次,收藏18次。linux服务器下使用nvidia-smi or nvidia-smi -l 1【数字表示输出间隔】命令查看GPU使用情况,三种情况1、没有进程,GPU使用率为空这种情况表示,没有进程占用GPU资源,属于为空的正常状态2、有进程,GPU使用率在变化我们如果想要终止进程ps -ef|grep pythonkill -9 58828 # 58828是该进程id当然,也可以杀死所有python进程killall -9 python以前写的博客有以上教程,戳我进入。3、看_centos gpu没跑程序使用率100%

reverse vs converse vs inverse_invert和reverse的区别-程序员宅基地

文章浏览阅读4.2k次。First, it helps to look at the verb usage: you can reverse something, but you cannot inverse or converse something. The distinctions between reverse, converse, and inverse can often be made by l_invert和reverse的区别

eclipse统计项目代码总行数_eclipse统计代码总行数-程序员宅基地

文章浏览阅读5.3k次。今天闲着突然想看一下手上做的一个小项目的总代码行数,苦于在eclipse中并没有找到这个功能,于是搜索一下,方法如下:step 1、选中你的项目文件夹,然后菜单栏中点击“search--file”,按照下图的内容进行查找:然后在查找的界面就显示出了你的代码总行数注意这个行数其实是统计了你代码中的换行符号的个数,所以它会统计上你的注释等等所有带了换行符号的行数,所_eclipse统计代码总行数

随便推点

在本地浏览器上查看远程服务器上的tensorboard_访问tensorboard的url post-程序员宅基地

文章浏览阅读673次,点赞2次,收藏4次。1. keras中生成tensorboard日志信息 由于tensorboard日志是记录并且可视化训练过程的各个指标和权重信息的,所以需要通过回调函数来实现训练过程中的记录,然后将相应的回调函数传给模型的fit方法即可。如下所示,tf.keras.callbacks中有现成的回调函数,然后将其传给fit方法的callback参数即可。训练完成后就会在logdir目录下生成相应的信息文件。log_dir = "logs/fit/" + datetime.datetime.n..._访问tensorboard的url post

解决git冲突步骤(超详细)_git解决冲突-程序员宅基地

文章浏览阅读2.7w次,点赞10次,收藏112次。本文介绍git冲突产生原因,详细介绍两种冲突的解决步骤(图文详细说明),包括merge冲突、push/pull冲突两种冲突类型的详细解决步骤_git解决冲突

java项目日常运维需要的文档资料_项目运维文档-程序员宅基地

文章浏览阅读791次,点赞11次,收藏12次。java项目开发完成,部署上线,进入项目运维阶段,日常工作需要准备哪些资料和文档?当项目上线后,运行一段时间,或多或少会遇到一些运维上的问题,比如服务器磁盘饱满,服务器CPU,内存使用率过高,应用存在安全漏洞,应用报错,临时需求编个变更等等。诸多问题。那么若想快速响应,平时就需要准备好与项目运维相关的文档和资料。我总结了以下一些内容。_项目运维文档

【树(Tree)详细介绍】_树的应用场景-程序员宅基地

文章浏览阅读175次。树是一种重要的非线性数据结构,它具有层级关系,由一组以边连接的节点组成。树有许多不同的分类和应用场景,每种树的类型都有其特定的特点和用途。了解树的基本概念和常见的树的分类,有助于我们在实际问题中选择合适的数据结构和算法,提高程序的效率和性能。_树的应用场景

java基础入门学习菜鸟入门第七天——java中的方法、变量_参数列表哪四种情况-程序员宅基地

文章浏览阅读266次。JAVA基础知识——方法、变量3.2方法3.2.1什么是方法?方法的定义:解决一类问题中代码的有序组合方法,是一个功能模板,也就是将很多行代码放置在一组 {} 中,形成一个代码块。3.2.2为什么需要使用方法?提高代码的复用性提高后期代码的扩展性、延展性提高代码后期的维护性案例://计算一个圆柱的表面积import java.util.Scanner;publi..._参数列表哪四种情况

SAP_ABAP_在SE11表中检查初始值initial value,ABAP中的初始值和空值_sap initial values-程序员宅基地

文章浏览阅读6.7k次。1、在开发中遇到这样的情况:一个表使用了一段时间之后需要增加一些字段,而表中已经存在数据了。2、SE16(N)查看数据时,SAP把具有初始值和空值的字段都显示为初始值,但是在查询语句中,它们在数据库中的行为是不一样的。_sap initial values

推荐文章

热门文章

相关标签