WebOffice入门教程:JS框架之VUE集成WebOffice

JS框架之VUE集成WebOffice

前期准备

在开始之前您需要确定：

您已学习《WebOffice入门教程一:Hello Word!》，并已实际动手实践成功完成此教程的全部内容。

使用方法

本教程的里所述的大部代码，用户不一定要通过手工编写，可以直接复制到记事本里保存即可测试。

开始工作

要实现VUE集成WebOffice，请您按如下步骤执行：

1.在您的VUE项目里起一个超链接,如：

具体到您的VUE项目，后面网址应是您的VUE项目地址 <a href="WebOffice://$Officectrl$http://vue项目地址/edit.html">查看</a>

可以复制上面代码到您的Web项目,注意上面项目地址是需要您依实际项目路径修改。

2.在您的VUE项目里建立一个普通的HTML页面(edit.html)，用于加载WebOffice控件

2.1、在您的VUE项目适当位置建立edit.html页面，并且为了让edit.html能正确加载WebOffice,执行如下操作：

编写html结构代码：

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

2.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=2025,2,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=2025,2,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>

2.3.设计按钮

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

执行完成后，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=2025,2,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>

执行后的效果如图：

2.4.调用WebOffice对象Open()方法打开文档

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

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

OpenDoc();

2.4.2、增加Open()函数的的函数实现

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

<script language="javascript">
function OpenDoc()
{
	//取得WebOffice对象
	var WebOffice=document.getElementById("WebOffice");
	//通过对象WebOffice的Open方法打开个一个服务器文档
	//此处服务器文档地址为：http://www.officectrl.com/officecs/temp/file1.doc
	WebOffice.Open("http://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方法打开个一个服务器文档
	//此处服务器文档地址为：http://www.officectrl.com/officecs/temp/file1.doc
	WebOffice.Open("http://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=2025,2,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>

2.5、运行测试

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

以上设计采用传统html＋js方法设计edit.html
目的是全面兼容vue各版本，通过以上方式可以实现不同js框架如React ，Angular，Express Next Svelte/SvelteKit Solid Astro Nuxt Remix Deno Fresh Foundation Bootstrap Curl 等的WebOffice集成。