WPSJS加载项技术介绍

最新推荐文章于 2025-11-07 13:37:00 发布

原创最新推荐文章于 2025-11-07 13:37:00 发布 · 4.3k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JSAPI二次开发专栏收录该内容

7 篇文章

订阅专栏

本文介绍了基于CEF技术的WPSJS加载项，详细阐述了Ribbon customUI设计、WPS加载项架构，以及如何免控件调起WPS客户端。业务系统与WPS的交互通过自定义协议和JSON数据交换实现，提供了跨平台和高兼容性的解决方案。

1. CEF技术介绍

JS加载项以CEF为技术基础，加载项的JS代码是运行在CEF内部的。CEF内部提供接口比如执行JS代码

CefRefPtr<CefBrowser> browser = ...;

CefRefPtr<CefFrame> frame = browser->GetMainFrame();

frame->ExecuteJavaScript("alert('ExecuteJavaScript works!');",frame->GetURL(), 0);

比如JS对象绑定

void MyRenderProcessHandler::OnContextCreated(

    CefRefPtr<CefBrowser> browser,

    CefRefPtr<CefFrame> frame,

    CefRefPtr<CefV8Context> context) 
{
  // Retrieve the context's window object.
  CefRefPtr<CefV8Value> object = context->GetGlobal();

  // Create a new V8 string value. See the "Basic JS Types" section below.
  CefRefPtr<CefV8Value> str = CefV8Value::CreateString("My Value!");

  // Add the string to the window object as "window.myval". See the "JS Objects" section below.
  object->SetValue("myval", str, V8_PROPERTY_ATTRIBUTE_NONE);
}

JS加载项在这些技术的基础上面开发完整的JSAPI的接口，更多CEF的技术细节

可以查看下面的网站：

chromiumembedded / cef / wiki / Home — Bitbucket

2. Ribbon customUI设计

Ribbon.xml UI设计部分按照标准的CustomUI的实现，其中逻辑控制，比如按钮显示，点击事件响应等等都是使用的JS实现。

效果样例：

WPS 加载项的结构采用 XML定义，一个典型的customUI定义如下：

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" onLoad="OnAddinLoad">

    <ribbon startFromScratch="false">

        <tabs>

            <tab id="wpsAddinTab" label="wps加载项示例">

                <group id="btnDemoGroup" label="group1">

                    <button id="btnShowMsg" label="弹出消息框" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" visible="true" size="large"/>

                    <button id="btnIsEnbable" getLabel="OnGetLabel" onAction="OnAction" enabled="true"  getImage="GetImage" visible="true" size="large"/>

                    <button id="btnShowDialog" label="弹对话框网页" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" getVisible="OnGetVisible" size="large"/>

                    <button id="btnShowTaskPane" label="弹任务窗格网页" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" getVisible="OnGetVisible" size="large"/>

                    <button id="btnShowTaskPane2" label="弹任务窗格网页" onAction="OnAction" getEnabled="OnGetEnabled"  getImage="GetImage" getVisible="OnGetVisible" size="large"/>

                </group>

            </tab>

        </tabs>

    </ribbon>

</customUI>

3. WPS加载项架构说明

整个WPS加载项使用WPS统一标准API，API内部就是对文档的各种操作和使用。WPS接口层提供统一对外的接口，传统的插件通过COM技术可以直接调用到该接口层，JS层对该接口添加了一层封装，用于实现JSAPI。从VBA或者VSTO的技术切换过来完全不用担心接口不兼容的问题，使用效果和老的接口一致。接口层是调用WPS核心组件提供的能力。在WPS组件层WPS内部解决了平台兼容性差异的问题，JS操作WPS的接口在WPS各个平台上面表现一致。使用起来方便，可移植性和跨平台性都很不错，总体设计结构如下

WPS接口：底层WPS提供多个标准接口，并封装了JavaScript接口。