Skip to content

调用控件

在ntkoofficecontrol.min.js里设置了文档控件的object标签的id,在不修改的情况下,该id是固定的,您可以在js代码中通过document.getElementById("TANGER_OCX")来获得控件文档控件对象,从而调用控件的相关属性和方法。

NTKO office文档控件拥有许多功能强大的接口,如上传文档至服务器、对文档的具体自动化操作(模板套红、部分编辑、强制留痕等等)以及集成我们其它产品的接口(NTKO安全电子印章系统、NTKO附件管理控件)。而我们的接口类型主要可以分为3种,分别是属性、方法、事件。以下简要说明一下调用的方式:

获取控件对象

javascript
var ntkoobj = document.getElementById("TANGER_OCX"); // 获得控件对象

注意:控件对象的id是固定的"TANGER_OCX",除非在ntkoofficecontrol.min.js中进行了修改。

属性调用

控件中的属性在新的产品中建议通过控件对象.属性名=某值的方式进行属性赋值。

示例:设置控件属性

javascript
function init(){
    var ntkoobj = document.getElementById("TANGER_OCX"); // 获得控件对象
    ntkoobj.fileopen = false; // 设置控件文件菜单"打开"项禁用
}

常用属性设置

javascript
// 设置控件基本属性
ntkoobj.fileopen = false;        // 禁用文件菜单"打开"项
ntkoobj.filesave = false;       // 禁用文件菜单"保存"项
ntkoobj.fileprint = false;      // 禁用文件菜单"打印"项
ntkoobj.fileexit = false;       // 禁用文件菜单"退出"项

// 设置文档保护
ntkoobj.SetReadOnly(true, "password"); // 设置文档只读保护

// 设置工具栏显示
ntkoobj.ShowToolbar = true;     // 显示工具栏
ntkoobj.ShowMenuBar = true;     // 显示菜单栏

方法调用

控件的方法调用方式主要是在js脚本中通过控件对象.方法名(参数)进行调用。

示例:打开文档

javascript
function openfile(){
    var ntkoobj = document.getElementById("TANGER_OCX");
    ntkoobj.BeginOpenFromUrl(url); // 打开服务器上的文档
}

常用方法调用

javascript
// 文档操作方法
ntkoobj.BeginOpenFromUrl(url);           // 从URL打开文档
ntkoobj.BeginSaveToUrl(url);             // 保存文档到URL
ntkoobj.NewDocument();                   // 新建文档
ntkoobj.CloseDocument();                 // 关闭文档

// 文档保护方法
ntkoobj.SetReadOnly(true, "password");   // 设置只读保护
ntkoobj.SetPassword("password");         // 设置密码保护

// 打印方法
ntkoobj.PrintDocument();                 // 打印文档
ntkoobj.PrintPreview();                  // 打印预览

// 工具栏和菜单控制
ntkoobj.HideMenuItem("文件");            // 隐藏菜单项
ntkoobj.AddCustomButton("按钮名", "图标", "提示"); // 添加自定义按钮

注意:以上方法调用只是一个示例,主要是讲明控件方法的调用方式,而方法具体的作用及其中的参数可以参考我们的文档控件开发接口文档。

事件调用

控件事件的调用主要是通过script标签进行声明,以下示例就是声明一个文档打开完成时触发的事件:

html
<script language="Jscript" for="TANGER_OCX" event="OnDocumentOpened(url,doc)">
    // 该事件是文档打开完成后触发的事件,可以在这里写打开文档之后的操作
    ntkoobj.SetReadOnly(true, "password"); // 保护文档只读
</script>

事件声明语法说明

  • language: 指脚本语言,一般都是js,所以不用更改
  • for: 指的是控件对象的id,跟控件加载代码object标签中的id一致
  • event: 指的是事件名称

常用事件示例

html
<!-- 文档打开完成事件 -->
<script language="Jscript" for="TANGER_OCX" event="OnDocumentOpened(url,doc)">
    console.log("文档打开完成");
    // 可以在这里执行文档打开后的操作
</script>

<!-- 文档保存完成事件 -->
<script language="Jscript" for="TANGER_OCX" event="OnDocumentSaved(url,doc)">
    console.log("文档保存完成");
    // 可以在这里执行保存后的操作
</script>

<!-- 文档关闭事件 -->
<script language="Jscript" for="TANGER_OCX" event="OnDocumentClosed()">
    console.log("文档已关闭");
    // 可以在这里执行关闭后的操作
</script>

<!-- 工具栏按钮点击事件 -->
<script language="Jscript" for="TANGER_OCX" event="OnCustomButtonClick(buttonName)">
    console.log("自定义按钮被点击:", buttonName);
    // 可以在这里处理自定义按钮的点击事件
</script>

完整示例

以下是一个完整的控件初始化和使用示例:

html
<!DOCTYPE html>
<html>
<head>
    <title>NTKO文档控件示例</title>
</head>
<body>
    <div id="officeContainer"></div>
    
    <script type="text/javascript" src="officecontrol/ntkoofficecontrol.min.js"></script>
    
    <script>
        // 等待控件加载完成
        function initControl() {
            var ntkoobj = document.getElementById("TANGER_OCX");
            if (ntkoobj) {
                // 设置控件属性
                ntkoobj.fileopen = false;
                ntkoobj.filesave = true;
                
                // 设置文档保护
                ntkoobj.SetReadOnly(false);
                
                console.log("控件初始化完成");
            } else {
                console.log("控件未加载,请检查配置");
            }
        }
        
        // 打开文档方法
        function openDocument(url) {
            var ntkoobj = document.getElementById("TANGER_OCX");
            if (ntkoobj) {
                ntkoobj.BeginOpenFromUrl(url);
            }
        }
        
        // 保存文档方法
        function saveDocument(url) {
            var ntkoobj = document.getElementById("TANGER_OCX");
            if (ntkoobj) {
                ntkoobj.BeginSaveToUrl(url);
            }
        }
        
        // 页面加载完成后初始化控件
        window.onload = function() {
            setTimeout(initControl, 1000); // 延迟1秒确保控件完全加载
        };
    </script>
    
    <!-- 事件处理 -->
    <script language="Jscript" for="TANGER_OCX" event="OnDocumentOpened(url,doc)">
        console.log("文档打开完成:", url);
        // 文档打开后的处理逻辑
    </script>
    
    <script language="Jscript" for="TANGER_OCX" event="OnDocumentSaved(url,doc)">
        console.log("文档保存完成:", url);
        // 文档保存后的处理逻辑
    </script>
</body>
</html>

注意事项

  1. 控件加载时机:确保在调用控件方法前,控件已经完全加载
  2. 错误处理:建议在调用控件方法时添加错误处理机制
  3. 浏览器兼容性:不同浏览器可能需要不同的处理方式
  4. 事件绑定:事件必须在控件加载完成后才能正确绑定
  5. 参数验证:调用方法时确保参数类型和数量正确