WPS加载项(wps jsapi)创建及部署--新版

daqinzl

已于 2024-05-13 18:01:18 修改

阅读量402

点赞数 5

文章标签： wps加载项 wps jsapi

于 2024-05-13 17:52:19 首次发布

本文链接：https://blog.csdn.net/daqinzl/article/details/138812605

版权

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

}