Skip to content

集成步骤

NTKO OFFICE平台版Plus的文档控件主要应用于B/S架构的集成开发,在代码部分的步骤介绍如下。

这里我们以发送的demo为例进行介绍:功能列表页面index.html上有对应的按钮,点击对应的按钮进行对应的新建打开文档等操作。点击对应的操作按钮打开文档控件所在页面,文档控件进行打开文档。

为适应更多的浏览器类型以及浏览器版本,我们的文档控件集成方式与以前是存在差异的,我们提供了一个ntkobackground.min.js,引用该JS文件,调用该JS提供的ntkoBrowser.openWindow方法,以弹出框的方式调用文档控件打开文档(不同浏览器机制不同具体呈现方式有差异)。接下来,以上述场景为例介绍文档控件的集成。

步骤一:index.html页面引用ntkobackground.min.js

将ntkobackground.min.js放到项目目录下,并且在index.html页面的<body>标签引入:

html
<body>
    <script type="text/javascript" src="officecontrol/ntkobackground.min.js"></script>
    <div class="divTop">
        <div class="divTopInner">
            <!-- 页面内容 -->
        </div>
    </div>
</body>

说明:ntkobackground.min.js提供了打开文档窗口、关闭文档窗口、关闭窗口事件等方法,方法详情请参考JS接口介绍。

步骤二:调用ntkoBrowser.openWindow(url)方法

在引用ntkobackground.min.js的页面上调用ntkoBrowser.openWindow(url)方法,方法第一个参数url应该指向即将打开文档的页面。按照示例场景,点击【新建文档】时,调用方法打开控件所在页面editindex.html:

javascript
if(cmd==5){
    ntkoBrowser.openWindow("editindex.html?cmd=" + cmd,false,"","","","",ntkotext,1600,1248);  
}else{
    ntkoBrowser.openWindow("editindex.html?cmd=" + cmd,false);
    if (cmd==3)
        {CLOSEVENT = true;}
    else
        {CLOSEVENT = false;}
}

步骤三:在editindex.html页面引用产生控件的ntkoofficecontrol.min.js

在NTKO OFFICE文档控件平台版Plus产品中我司会提供一个产生文档控件的JS文件(ntkoofficecontrol.min.js),将该JS文件拷贝放到项目目录下,在ntkoBrowser.openWindow方法指定的B页面的<body>标签中引入该JS文件并做控件classid、codebase、控件高宽以及正式版产品所需的授权信息(MakerCaprtion、MakerKey、Production、ProductKey属性)的修改:

html
<div class="divBody">
    <script type="text/javascript" src="officecontrol/ntkoofficecontrol.min.js"></script>
</div>

步骤四:修改ntkoofficecontrol.min.js里文档控件对应信息

ntkoofficecontrol.min.js里的内容如下:

javascript
/*------------------------------------------------------*/
/*                    修改控件的配置信息                 */
/*                   version:4.0.1                      */
/*                                                     */
/*------------------------------------------------------*/
//64位控件的calssid
var classidx64="A64E3073-2016-4baf-A89D-FFE1FAA10EE0";
//32位控件的classid
var classid="A64E3073-2016-4baf-A89D-FFE1FAA10EC0";
//32位控件包的路径
//var codebase="officecontrol/OfficeControl.cab#version=6.0.3.1";
//64位控件包的路径
//var codebase64="officecontrol/OfficeControlx64.cab#version=6.0.3.1";
//设置高度
var height="800px";
//设置宽度
var width="100%";
//买断授权密钥如果不是买断可以不用写
var MakerCaption="";
//买断授权密钥如果不是买断可以不用写
var MakerKey="";
//密钥
var ProductCaption="";
//密钥
var ProductKey="";
//解除时间密钥
var NoExpireKey="";

如何获取控件配置信息

在上述步骤中提到要修改产生控件的相关信息,包含classid、codebase以及授权信息等,那么这些信息怎么获取呢?

1. 获取classid信息

首先需要了解classid是生成文档控件cab时就定了的,可以从文档控件cab包里的inf文件中获取。如文档控件的cab是OfficeControl.cab文件,那么就从OfficeControl.inf文件里找到OfficeControl.ocx对应的信息,如下图所示:

ini
[OfficeControl.ocx]
file-win32-x86=thiscab
clsid={A64E3073-2016-4baf-A89D-FFE1FAA10EC0}
FileVersion=6,0,1,9
RegisterServer=yes

从inf文件中我们可以得知此文档控件的对应信息:

  • file-win32-x86=thiscab 表示这个文档控件是32位的控件
  • classid 就是 clsid={} 里的内容
  • 文档控件的版本号是6.0.1.9

重要提示:修改ntkoofficecontrol.min.js里的classid时必须是与当前引用的控件cab里的信息完全一致,否则可能会出现控件无法加载等问题。

2. 设置codebase路径

Codebase是由控件cab的路径与控件的fileversion版本号通过#号连接,codebase里的路径指控件在服务器上相对于当前网页的url地址,通常是写相对路径,此路径必须是能找到控件cab的,否则可能导致控件无法加载。

3. 配置授权信息

授权信息是正式产品才有的,如果是测试产品则不用设置。正式产品的授权信息请从产品对应的《秘钥及使用说明.txt》中获取。

完成集成

完成以上操作之后即可进行调用接口打开文档等操作。

注意事项

  1. 版本一致性:确保classid与控件cab包中的信息完全一致
  2. 路径正确性:确保codebase中的路径能够正确访问到控件cab文件
  3. 授权信息:正式产品需要正确配置授权信息
  4. 浏览器兼容性:不同浏览器可能需要不同的配置方式
  5. 文件完整性:确保所有必要的JS文件和CAB包都已正确部署