WebOffice入门教程：Hello World!（二）设计WebOffice控件加载页-控件新闻-慧都网

WebOffice入门教程：Hello World!（二）设计WebOffice控件加载页

转帖|使用教程|编辑：莫成敏|2020-04-14 14:27:18.460|阅读 374 次

概述：WebOffice控件是国内领先的在线编辑Office文档软件，软件产品从1998年立项至今已有20多年历史，期间服务了众多大中小型企业、各级政府机关、科研机构和学校等事业单位。本文介绍了WebOffice入门教程，Hello World!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

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

点击下载WebOffice正式版

本教程介绍了WebOffice打开一个服务器文档，一共分为四个步骤：

WebOffice控件下载与注册
生成两个html文档
设计启动页(index.html)
设计WebOffice控件加载页(edit.html)（本文内容，紧接前文）

四、设计WebOffice控件加载页(edit.html)

1、为了让edit.html能正确加载WebOffice,执行如下操作：

编写html结构代码：

<html>
<head>
<title></title>
</head>
<body> 
</body>
</html>

2、引入WebOffice对象

请将如下代码复制到edit.html代码body标签之后:

<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>

完成后,如下

<html>
<head>
<title></title>
</head>
<body>
<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>
</body>
</html>

3、设计按钮

在edit.html代码Body标签之后 <script language="javascript">标签之前加入如下代码：

<div><input type=button onclick="" value="打开"></div>

执行完成后，edit.html的代码如下：

<html>
<head>
<title></title>
</head>
<body><div><input type=button onclick="" value="打开"></div>
<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>
</body>
</html>

执行后的效果如图：

4、调用WebOffice对象Open()方法打开文档

为“打开”按扭增加点击触发JS函数：

①找到“打开”按扭代码的onclick属性，在双引号里写入如下代码：

OpenDoc();

②增加Open()函数的的函数实现

在edit.html的</head>和<body>标签之前加入如下代码：

<script language="javascript">
function OpenDoc()
{
	//取得WebOffice对象
	var WebOffice=document.getElementById("WebOffice");
	//通过对象WebOffice的Open方法打开个一个服务器文档
	//此处服务器文档地址为：//www.officectrl.com/officecs/temp/file1.doc
	WebOffice.Open("//www.officectrl.com/officecs/temp/file1.doc",false,"Word.Document");
}
</script>

执行完成以上所有步骤以后，edit.html全部代码(用户可把以下代码复制粘贴到edit.html的记事本编辑器里)如下：

<html>
<head>
<title></title>
</head>
<script language="javascript">
function OpenDoc()
{
	//取得WebOffice对象
	var WebOffice=document.getElementById("WebOffice");
	//通过对象WebOffice的Open方法打开个一个服务器文档
	//此处服务器文档地址为：//www.officectrl.com/officecs/temp/file1.doc
	WebOffice.Open("//www.officectrl.com/officecs/temp/file1.doc",false,"Word.Document");
}
</script>
<body><div><input type=button onclick="OpenDoc();" value="打开"></div>
<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>
</body>
</html>

5、运行测试

用浏览器打开index.html后，点击查看链接，弹出启动应用程序是否同意对话框选择“同意”后，出现智能窗，在智能窗网页点击“打开”按钮，如果你此时互联网联通，则可以正确打开 www.officectrl.com服务器上的文档。效果如下：

本示例，如果用户不使用互联网文档，用户可以设置自已服务器地址如：//localhost/test.doc

将edit.html用地址//localhost/test.doc 修改后代码如下：

<html>
<head>
<title></title>
</head>
<script language="javascript">
function OpenDoc()
{
	//取得WebOffice对象
	var WebOffice=document.getElementById("WebOffice");
	//通过对象WebOffice的Open方法打开个一个服务器文档
	//此处服务器文档地址为：//www.officectrl.com/officecs/temp/file1.doc
	WebOffice.Open("//localhost/test.doc",false,"Word.Document");
}
</script>
<body><div><input type=button onclick="OpenDoc();" value="打开"></div>
<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>
</body>
</html>

如果用户//localhost/test.doc地址是一个正确WORD文档的URL地址，则可以正确查看结果。

注意：WebOffice的运行不一定需要使用互联网络或局域网环境，WebOffice完全可以在一台电脑上完成所有测试。因为WebOffice支持网络B/S结构、C/S结构的一层、多层或任意层的架构运行，也支持单机版、桌面端程序运行。WebOffice采用业界标准的COM组件设计。

本教程内容尚未完结，敬请期待后续内容！您可以下载WebOffice试用版免费体验~或者点击下方链接，查看本教程示例~