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}

}

相关推荐
red润1 个月前
wps加载项教程
前端·js·wps·wps加载项·加载项