WebOffice初学者使用教程：Javascript编程原理（一）-控件新闻-慧都网

WebOffice初学者使用教程：Javascript编程原理（一）

翻译|使用教程|编辑：杨鹏连|2020-11-12 13:58:52.360|阅读 489 次

概述：本文档全面介绍WEB前端如何集成WebOffice控件,通过Javascript编程实现控件功能接口的调用，达到解决Web项目需求的目的，掌握此前端设计后将会理解WebOffice以View层的解决方案从而适合任意Web项目架构。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

WebOffice控件是国内领先的在线编辑Office文档软件，软件产品从1998年立项至今已有20多年历史，期间服务了众多大中小型企业、各级政府机关、科研机构和学校等事业单位。通过WebOffice软件可以让用户方便从远程直接打开Word,Excel,Ppt等文档编辑后再次保存至服务器原位置，实现远程编辑文档、远程保存，为用户在线办公开创新式、便捷的使用体验。

WebOffice文档控件(标准版永久授权)原价8000元，现活动优惠价只需7846元 >>查看其他版本

点击下载WebOffice正式版

相关内容推荐：

WebOffice 使用教程>>>

WebOffice使用教程：WebOffice常用API接口在线参考手册（一)>>>

WebOffice使用教程：WebOffice常用API接口在线参考手册（二）>>

WebOffice使用教程：WebOffice常用API接口在线参考手册（三）>>

WebOffice使用教程：WebOffice常用API接口在线参考手册（四）>>

文档使用说明：

本文档全面介绍WEB前端如何集成WebOffice控件,通过Javascript编程实现控件功能接口的调用，达到解决Web项目需求的目的，掌握此前端设计后将会理解WebOffice以View层的解决方案从而适合任意Web项目架构。

本文档适合WebOffice初次使用者学习使用。学习本文需要具备如下计算机技术语言：HTML、Javascript

一、Javascript编程原理

1.1、网页里加载WebOffice并获得编程对象存入指定变量

下载WebOffice.rar安装包，本地安装WebOffice组件后，在网页加载控件

下面是控件加载代码，这些代码是固定的，只需放到你网页相应位置即可。

<script language="javascript">
         if (!!window.ActiveXObject || "ActiveXObject" in window){
         document.write('<object classid="clsid:FF09E4FA-BFAA-486E-ACB4-86EB0AE875D5" codebase="WebOffice.ocx#Version=2019,1,7,3" id="WebOffice" width="900" height="500" >');
         document.write('</object>');}
         else
         {
         document.write('<object id="WebOffice" CLSID="{FF09E4FA-BFAA-486E-ACB4-86EB0AE875D5}" TYPE="application/x-itst-activex"  width=100% height=900></object>');
         }
</script>

通过上面JS代码放置控件对象，控件对象的名称由上面ID属性定义，即为：WebOffice,这样在JS代码里访问WebOffice控件可以用如下代码：

var obj = document.getElementById('WebOffice');

运行上面此句后，则obj即为Javascript编程对象。大多数情况下建议对象名称统一为:WebOffice,即用下面代码获得控件对象:

var WebOffice = document.getElementById('WebOffice');

上面JS语句的变量weboffice即为控件的JS编程对象

1.2、使用WebOffice对象访问控件接口

当控件正常加载后会看到控件显示的界面，像下图，即表示控件正常加载

上图是控件运行后的界面。

当控件正常加载后，使用JS代码获得控件编程对象即可调用控件相关方法实现满足需求，如使用OPEN方法打开一个指定的WORD文档，如下面代码：

var WebOffice=document.getElementById("WebOffice");
WebOffice.Open('//www.officectrl.com/officecs/temp/word.doc');

1.3、网页加载后自动打开指定的文档

实现网页加载控件后自动打开文档是使用网页BODY标签的ONLOAD事件里执行Open方法，并且在执行Open 方法前增加一小段延时处理功能，以有利于浏览器完全加载控件后执行Open方法。

在网页标签body的onload事件里增加函数名称：webopen，代码像下面这样：

<body topmargin=0 leftmargin=0 onload="javascript:WebOpen();">;

在Webopen函数里实现延时响应执行JS函数OpenDocument，并在此函数OpenDocument里执行Open方法，JavaScript函数实现具体如下：

<script language=javascript>

function WebOpen()

{

       WebOffice = document.getElementById('WebOffice');//获得控件对象

       if (WebOffice){//等待控件初始化完毕，时间可以根据网络速度设定。

             setTimeout('OpenDocument()',1000);}  //1000代表1秒后执行

}

function OpenDocument()

{

       try{

              var strOpenUrl = ‘//www.officectrl.com/officecs/temp/word.doc’;  

              document.getElementById('WebOffice').Open(strOpenUrl,true,"Word.Document");

       }catch(e) {

alert(e);         

       }

}

</script>

想要购买WebOffice正版授权，或了解更多产品信息请点击