本文主要是介绍WPS加载项(wps jsapi)创建及部署--新版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1,在桌面新建文件夹wpsjsapitest，在命令提示符中转到wpsjsapitest路径下，
2,新建加载项HelloWps、HelloEt、HelloWpp
(i),在命令提示符中执行命令wpsjs create HelloWps
(ii),在命令提示符中执行命令wpsjs create HelloEt
(iii),在命令提示符中执行命令wpsjs create HelloWpp
以下四步(3,4,5,6)是在不采用wpsjs publish命令时的做法(其实执行wpsjs publish，会生成一个wps-addon-build文件夹，里面内容与下面手动复制的内容一致，另外会生成一个wps-addon-publish文件夹，里面放置publish.html)。
3，在D:\Tomcat 8.*\webapps\下新建文件夹wpsjsapitest，在wpsjsapitest文件夹下新建HelloWps、HelloEt、HelloWpp，
4，将桌面wpsjsapitest\HelloWps目录下的images目录、js目录，ui目录、index.html、main.js、ribbon.xml复制到D:\Tomcat 8.*\webapps\wpsjsapitest\HelloWps目录下。
5，将桌面wpsjsapitest\HelloEt目录下的images目录、js目录，ui目录、index.html、main.js、ribbon.xml复制到D:\Tomcat 8.*\webapps\wpsjsapitest\HelloEt目录下。
6，将桌面wpsjsapitest\HelloWpp目录下的images目录、js目录，ui目录、index.html、main.js、ribbon.xml复制到D:\Tomcat 8.*\webapps\wpsjsapitest\HelloWpp目录下。
注意，D:\Tomcat 8.*是tomcat服务器目录，运行demo时请保证tomcat服务器在运行状态。
7，在桌面新建文件夹“wps jsapi test caller”，里面放三个文件，index.html，wpsjs_func.js，wpsjsrpcsdk.js，其中wpsjsrpcsdk.js是npm安装wpsjs时下载到本地的库。
浏览器打开index.html，点击第一个按钮，即可启动wps、et、或wpp(注意参数设置，下面的代码里有详细解释)，并打开本地文档
例子见https://download.csdn.net/download/daqinzl/89303452。
index.html文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试集成页面</title>
<style>
div {
margin: 5px 3px;
}
</style>
</head>
<body>
<div><button οnclick="action1();">执行加载项函数InvokeFromSystemDemo</button></div>
<div><button οnclick="action2();">传递一个Object至WPS</button></div>
<div><button οnclick="action3();">传递一个String至WPS</button></div>
<script src="wpsjsrpcsdk.js"></script>
<script src="wpsjs_func.js"></script>
<script type="text/javascript">
function action1() {
var readOnly=false;
//打开word时参数设置如下，注意与wpsjs_func.js里url设置一致
var type = "wps";
var filePath = "D:/test.docx";
//打开excel时参数设置如下，注意与wpsjs_func.js里url设置一致
type = "et";
filePath = "D:/test.xlsx";
//打开ppt时参数设置如下，注意与wpsjs_func.js里url设置一致
type = "wpp";
filePath = "D:/test.pptx";
wpsJs_openFile(type, filePath, readOnly);
}
function action2(params) {
}
function action3(params) {
}
</script>
</body>
</html>
///
wpsjs_func.js文件内容如下:
function wpsJs_openFile(type, filePath, readOnly) {
var element = {
"name": wpsjs_GetAddonName(type),
"addonType": type,
"online": "true",
//打开word，excel，ppt时请设置不同url
"url": "http://127.0.0.1:80/wpsjsapitest/HelloWps/"
//"url": "http://127.0.0.1:80/wpsjsapitest/HelloEt/"
//"url": "http://127.0.0.1:80/wpsjsapitest/HelloWpp/"
}
console.log('wpsjs_StartUp', element)
WpsAddonMgr.enable(element, function(res) {
console.log("启用加载项" + type + "结果：", res);
var invokeParam = {
filePath: filePath,
readOnly: readOnly
}
WpsInvoke.InvokeAsHttps(
type,
wpsjs_GetAddonName(type), //wps加载项的名字，在实际项目中写上对应的名字
"InvokeFromSystemDemo", //要调用的在wps加载项中的函数名
JSON.stringify(invokeParam), //调用的在wps加载项中的函数要传递的数据，是一个json对象，根据业务系统需求任意定义
wpsjs_CallBackFunc) //回调函数，wps加载项中InvokeFromSystemDemo这个函数的返回值作为这个函数的参数
})
}
function wpsjs_GetAddonName(type) {
if (type == 'wps')
return 'HelloWps'
else if (type == 'et')
return 'HelloEt'
else if (type == 'wpp')
return 'HelloWpp'
return 'addon'
}
var wpsjs_CallBackFunc = function(result) {
}
///
D:\Tomcat 8.*\webapps\wpsjsapitest\HelloWps\js\systemdemo.js文件内容如下
function openOfficeFileFromSystemDemo(param){
let jsonObj = (typeof(param)=='string' ? JSON.parse(param) : param)
alert("从业务系统传过来的参数为：" + JSON.stringify(jsonObj))
return {wps加载项项返回: jsonObj.filepath + ", 这个地址给的不正确"}
}
function InvokeFromSystemDemo(param){
let jsonObj = (typeof(param)=='string' ? JSON.parse(param) : param);
let readOnly = jsonObj.readOnly;
let filePath = jsonObj.filePath;
console.log("before open jsonObj:", jsonObj);
wps.PluginStorage.setItem("readOnly", readOnly);
let _readOnly = wps.PluginStorage.getItem("readOnly");
wps.WpsApplication().Documents.Open(filePath, null, _readOnly);
return {操作结果:"打开word文件成功", readOnly: readOnly};
}
///
D:\Tomcat 8.*\webapps\wpsjsapitest\HelloEt\js\systemdemo.js文件内容如下
function openOfficeFileFromSystemDemo(param){
let jsonObj = (typeof(param)=='string' ? JSON.parse(param) : param)
alert("从业务系统传过来的参数为：" + JSON.stringify(jsonObj))
return {wps加载项项返回: jsonObj.filepath + ", 这个地址给的不正确"}
}
function InvokeFromSystemDemo(param){
let jsonObj = (typeof(param)=='string' ? JSON.parse(param) : param)
let readOnly = jsonObj.readOnly
let filePath = jsonObj.filePath;
// console.log("before open jsonObj:", jsonObj)
wps.PluginStorage.setItem("readOnly", readOnly)
let _readOnly = wps.PluginStorage.getItem("readOnly")
wps.EtApplication().Workbooks.Open(filePath, null, _readOnly)
return {操作结果:"打开excel文件成功", readOnly: readOnly}
}
///
D:\Tomcat 8.*\webapps\wpsjsapitest\HelloWpp\js\systemdemo.js文件内容如下
function openOfficeFileFromSystemDemo(param){
let jsonObj = (typeof(param)=='string' ? JSON.parse(param) : param)
alert("从业务系统传过来的参数为：" + JSON.stringify(jsonObj))
return {wps加载项项返回: jsonObj.filepath + ", 这个地址给的不正确"}
}
function InvokeFromSystemDemo(param){
let jsonObj = (typeof(param)=='string' ? JSON.parse(param) : param)
let readOnly = jsonObj.readOnly
let filePath = jsonObj.filePath;
console.log("before open jsonObj:", jsonObj)
wps.PluginStorage.setItem("readOnly", readOnly)
let _readOnly = wps.PluginStorage.getItem("readOnly")
wps.WppApplication().Presentations.Open(filePath, _readOnly)
return {操作结果:"打开ppt文件成功", readOnly: readOnly}
}
这篇关于WPS加载项(wps jsapi)创建及部署--新版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
