组件关系

顶部选项卡ribbon

顶部选项卡ribbon显示效果

实现效果和开始菜单类似

配置文件ribbon.xml/js

使用如下配置文件进行配置展示效果具体内容参考开发手册

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" onLoad="OnAddinLoad">
    <ribbon startFromScratch="false">
        <tabs>
            <tab id="wpsAddinTab" label="加载项1.2">
                <group id="btnDemoGroup" label="group1">
                    <!-- <button id="uploadFile" label="上传" onAction="OnAction" enabled="true"  getImage="GetImage" getVisible="OnGetVisible" size="large"/> -->
                    <!-- <button id="openSmartHtml" label="打开页面" onAction="OnAction" enabled="true"  getImage="GetImage" getVisible="OnGetVisible" size="large"/> -->
                    <!-- <button id="passwordTest" label="密码按钮测试" onAction="OnAction" enabled="true"  getImage="GetImage" getVisible="OnGetVisible" size="large"/> -->
                    <button id="redheadlist" label="红头列表" onAction="OnAction2" enabled="true" getImage="GetImage"
                            getVisible="OnGetVisible" size="large"/>
                    <button id="redheadupload" label="上传红头" onAction="OnAction2" enabled="true" getImage="GetImage"
                            getVisible="OnGetVisible" size="large"/>
                </group>
                <group id="grpWPSCloud" label="标题" getVisible="OnGetVisible">
                    <button id="title" label="标题" onAction="OnAction" enabled="true" getImage="GetImage"
                            getVisible="OnGetVisible" size="large"/>
                </group>
                <group id="grpWPSCloud" label="小标题" getVisible="OnGetVisible">
                    <box id="boxWPSWorkEx" boxStyle="vertical" visible="true">
                        <button id="one-title" label="一级标题" onAction="OnAction" enabled="true" getImage="GetImage"
                                getVisible="OnGetVisible" size="large"/>
                        <button id="two-title" label="二级标题" onAction="OnAction" enabled="true" getImage="GetImage"
                                getVisible="OnGetVisible" size="large"/>
                        <button id="three-title" label="三级标题" onAction="OnAction" enabled="true" getImage="GetImage"
                                getVisible="OnGetVisible" size="large"/>
                    </box>
                </group>
                <group id="grpWPSCloud" label="文本格式处理" getVisible="OnGetVisible">
                    <box id="boxRevision1" boxStyle="horizontal" visible="true">
                        <button id="hangJianJu" label="行间距" onAction="OnAction" enabled="true" getImage="GetImage"
                                getVisible="OnGetVisible" size="large"/>
                    </box>
                    <box id="boxRevision1" boxStyle="horizontal" visible="true">
                        <button id="yeBianJu" label="页边距" onAction="OnAction" enabled="true" getImage="GetImage"
                                getVisible="OnGetVisible" size="large"/>
                    </box>
                    <box id="boxRevision1" boxStyle="horizontal" visible="true">
                        <button id="main" label="正文" onAction="OnAction" enabled="true" getImage="GetImage"
                                getVisible="OnGetVisible" size="large"/>
                    </box>
                </group>
                <group id="btnDemoGroup" label="去格">
                    <button id="delPicTab" label="去除文本图和表" onAction="OnAction" enabled="true" getImage="GetImage"
                            getVisible="OnGetVisible" size="large"/>
                </group>
            </tab>
        </tabs>
    </ribbon>
</customUI>

使用如下配置文件进行配置逻辑具体内容参考开发手册

//这个函数在整个wps加载项中是第一个执行的
function OnAddinLoad(ribbonUI){
    if (typeof (window.Application.ribbonUI) != "object"){
		window.Application.ribbonUI = ribbonUI
    }
    
    if (typeof (window.Application.Enum) != "object") { // 如果没有内置枚举值
        window.Application.Enum = WPS_Enum
    }

    window.Application.PluginStorage.setItem("EnableFlag", false) //往PluginStorage中设置一个标记，用于控制两个按钮的置灰
    window.Application.PluginStorage.setItem("ApiEventFlag", false) //往PluginStorage中设置一个标记，用于控制ApiEvent的按钮label
    return true
}

var WebNotifycount = 0;
function OnAction(control) {
    const eleId = control.Id
    switch (eleId) {
        case "btnShowMsg":
            {
                const doc = window.Application.ActiveDocument
                if (!doc) {
                    alert("当前没有打开任何文档")
                    return
                }
                alert(doc.Name)
            }
            break;
        case "btnIsEnbable":
            {
                let bFlag = window.Application.PluginStorage.getItem("EnableFlag")
                window.Application.PluginStorage.setItem("EnableFlag", !bFlag)
                
                //通知wps刷新以下几个按饰的状态
                window.Application.ribbonUI.InvalidateControl("btnIsEnbable")
                window.Application.ribbonUI.InvalidateControl("btnShowDialog") 
                window.Application.ribbonUI.InvalidateControl("btnShowTaskPane") 
                //window.Application.ribbonUI.Invalidate(); 这行代码打开则是刷新所有的按钮状态
                break
            }
        case "btnShowDialog":
            window.Application.ShowDialog(GetUrlPath() + "/ui/dialog.html", "这是一个对话框网页", 400 * window.devicePixelRatio, 400 * window.devicePixelRatio, false)
            break
        case "btnShowTaskPane":
            {
                let tsId = window.Application.PluginStorage.getItem("taskpane_id")
                if (!tsId) {
                    let tskpane = window.Application.CreateTaskPane(GetUrlPath() + "/ui/taskpane.html")
                    let id = tskpane.ID
                    window.Application.PluginStorage.setItem("taskpane_id", id)
                    tskpane.Visible = true
                } else {
                    let tskpane = window.Application.GetTaskPane(tsId)
                    tskpane.Visible = !tskpane.Visible
                }
            }
            break
        case "btnApiEvent":
            {
                let bFlag = window.Application.PluginStorage.getItem("ApiEventFlag")
                let bRegister = bFlag ? false : true
                window.Application.PluginStorage.setItem("ApiEventFlag", bRegister)
                if (bRegister){
                    window.Application.ApiEvent.AddApiEventListener('DocumentNew', OnNewDocumentApiEvent)
                }
                else{
                    window.Application.ApiEvent.RemoveApiEventListener('DocumentNew', OnNewDocumentApiEvent)
                }

                window.Application.ribbonUI.InvalidateControl("btnApiEvent") 
            }
            break
        case "btnWebNotify":
            {
                let currentTime = new Date()
                let timeStr = currentTime.getHours() + ':' + currentTime.getMinutes() + ":" + currentTime.getSeconds()
                window.Application.OAAssist.WebNotify("这行内容由wps加载项主动送达给业务系统，可以任意自定义, 比如时间值:" + timeStr + "，次数：" + (++WebNotifycount), true)
            }
            break
        default:
            break
    }
    return true
}

function GetImage(control) {
    const eleId = control.Id
    switch (eleId) {
        case "btnShowMsg":
            return "images/1.svg"
        case "btnShowDialog":
            return "images/2.svg"
        case "btnShowTaskPane":
            return "images/3.svg"
        default:
            ;
    }
    return "images/newFromTemp.svg"
}

function OnGetEnabled(control) {
    const eleId = control.Id
    switch (eleId) {
        case "btnShowMsg":
            return true
            break
        case "btnShowDialog":
            {
                let bFlag = window.Application.PluginStorage.getItem("EnableFlag")
                return bFlag
                break
            }
        case "btnShowTaskPane":
            {
                let bFlag = window.Application.PluginStorage.getItem("EnableFlag")
                return bFlag
                break
            }
        default:
            break
    }
    return true
}

function OnGetVisible(control){
    return true
}

function OnGetLabel(control){
    const eleId = control.Id
    switch (eleId) {
        case "btnIsEnbable":
        {
            let bFlag = window.Application.PluginStorage.getItem("EnableFlag")
            return bFlag ?  "按钮Disable" : "按钮Enable"
            break
        }
        case "btnApiEvent":
        {
            let bFlag = window.Application.PluginStorage.getItem("ApiEventFlag")
            return bFlag ? "清除新建文件事件" : "注册新建文件事件"
            break
        }    
    }
    return ""
}

function OnNewDocumentApiEvent(doc){
    alert("新建文件事件响应，取文件名: " + doc.Name)
}

侧边栏弹出框

侧边栏弹出框显示效果

侧边弹出类似网页的样式

侧边栏弹出框配置文件

使用如下命令配置创建弹出页面

let tskpane = wps.CreateTaskPane(GetUrlPath() + "/taskpane.html")

页面可引入js 编写逻辑

<script type="text/javascript" src="../js/util.js"></script>
<script type="text/javascript" src="../js/taskpane.js"></script>
<script type="text/javascript" src="../.debugTemp/wpsjsrpcsdk.js"></script>

弹出消息框

弹出消息框配置文件

alert("弹出");

弹出操作框

弹出操作框配置文件

wps.ShowDialog(listWebPagePath+html, title, height, width, bModal);

业务系统本地WPS沟通方式

业务系统拉起本地WPS流程

引入wpsJsSdk

使用如下命令单线程拉起wps客户端

 wpsClient.InvokeAsHttp(
     projInfo,type// 加载项类型 
     projInfo.name,//加载项的名字
     "openOfficeFileFromSystemDemo",//客户端加载项要执行的方法
     JSON.stringify(invokeParam),//客户端加载项要执行方法的参数
     resolve, //回调函数
     true,//设置客户端是否显示到最前
     )

type及name参数 type固定为文档为wps,表格为et,幻灯片是wpp

var projInfo = { name: "JdjwJZX", type: "wps" }

openOfficeFileFromSystemDemo 方法内容

function openOfficeFileFromSystemDemo(param) {
    let jsonObj = (typeof (param) == 'string' ? JSON.parse(param) : param)
    alert("从业务系统传过来的参数为：" + JSON.stringify(jsonObj))
    return { wps加载项项返回: jsonObj.filepath + ", 这个地址给的不正确" }
}

openOfficeFileFromSystemDemo 所在js必须要被main.js引用

本地WPS回调业务系统方式

可通过如下接口向业务方发送消息

OAAssist.WebNotify(
    notifyStr,//推送的内容
    Force//是否强制
);

回调函数接受本地wps客户端发送消息

WpsInvoke.RegWebNotify("wps", projInfo.name, handleMessage)
function handleMessage(data) {
    console.log(data)
}

业务方主动获取信息通过调用加载项中对应函数可以根据函数获取本地客户端信息用于获取用户现在进度,重新重连或同步数据

function onDivClick(param, showToFront) {
  var invokeParam = {
    按需求定义: "安需求给值",
    Index: param,
    AppType: projInfo.type,
    息定义: {
      XXX定义: "xXX值",
    },
  }; //根据需求任意定义
  WpsInvoke.InvokeAsHttp(
    projInfo.type,
    projInfo.name, //wps加载项的名字，在实际项目中写上对应的名字
    "InvokeFromSystemDemo", //要调用的在wps加载项中的函数名
    JSON.stringify(invokeParam), //调用的在wps加载项中的函数要传递的数据，是一个json对象，根据业务系统需求任意定义
    calLbackFunc, //回调函数，wps加载项中InvokeFromSystemDemo这个函数的返回值作为这个函数的参数
    showToFront
  ); //设置wps是否显示到最前面来
}

拉起本地多个客户端并获取关联关系
通过创建多个客户端并保留关联关系,可分别进行不同操作.多线程必需要打开一个新的客户端.

// jsPlugins对应的name，type
var projInfo = { name: "JdjwJZX", type: "wps" };
var wpsClient = new WpsClient(projInfo.type);
var systemDate = new Date().getTime();
var JdjwWpsClient = {
  // 初始化sdk 包裹第一个接口
  initSdk: function () {
    return new Promise(function (resolve) {
      WpsInvoke.InitSdk(false, resolve);
    });
  },
  // 多进程打开文档
  openFile: function (invokeParam, jspluginsUrl) {
    wpsClient.jsPluginsXml = jspluginsUrl;
    return new Promise(function (resolve) {
      wpsClient.InvokeAsHttp(
        projInfo.name,
        "InvokeFromSystemDemo",
        JSON.stringify(invokeParam),
        resolve,
        true
      );
    });
  },
  // 单进程显示
  showInvokeAsHttp: function (invokeParam, jspluginsUrl) {
    return new Promise(function (resolve) {
      WpsInvoke.InvokeAsHttp(
        projInfo.type,
        projInfo.name,
        "InvokeFromSystemDemo",
        invokeParam,
        resolve,
        true,
        jspluginsUrl,
        false
      );
    });
  },
  // 单进程隐藏
  hideInvokeAsHttp: function (invokeParam, jspluginsUrl) {
    return new Promise(function (resolve) {
      WpsInvoke.InvokeAsHttp(
        projInfo.type,
        projInfo.name,
        "InvokeFromSystemDemo",
        invokeParam,
        resolve,
        false,
        jspluginsUrl,
        true
      );
    });
  },
};

Last modified: 27 August 2024