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}
}