WebOffice快速集成入门教程:引入JS文件打开文档

如要实现：引入JS文件打开文档

前提条件

请你确认是否具备如下知识条件：

阅读本节教程，我们假定您已阅读《如何快速打开一个WORD文档》教程，如果还没有，请前往学习：《如何快速打开一个WORD文档》

使用方法

本教程的里所述的大部代码，用户不一定要通过手工编写，可以直接复制到记事本里保存为网页文件扩展名.html的文件即可用浏览器测试。

开始工作

要实现WebOffice引入JS文件代码打开文档，请您按如下步骤执行：

1、生成JS文件

找到《如何快速打开一个WORD文档》教程里生成的index.html文件所在文件夹，或网上下载解压出来，在此文件夹里生成一个JS文件,命名为：weboffice.js 。在weboffice.js文件里写入如下js代码:

function OpenFile()
{
	WebOffice.Open('http://www.officectrl.com/weboffice/temp/file1.doc',false,'doc')
}

2、修改html文档加入获得js文件的地址

2.1、加入动态获得js文件的地址。
上述第一步操作完成后，会得到index.html和weboffice.js在同一目录里，找到index.html文件,用记事本或编辑器工具打开index.html查看源代码。在head标签的后面加入如下JS代码用于动态获得index.html运行后的路径:

<script language="javascript" type ="text/javascript">
///////////////////////////////////////////////////////////////////
///以下代码采用JS自动检测浏览器地址栏的根地址,并返回相关数据
var varpath = decodeURI(window.location.pathname);
var varhost=window.location.host; 
var strRoot;
if (varhost=='')
{
	//使用本地机地址打开此页面，地址类似于：file:///c:/***/index.html	
	strRoot = varpath.substring(1,varpath.lastIndexOf('/')+1);//取得打开、保存路径 
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
	
}else
{
	//使用网络地址运行本页面,地址类似于: http://localhost/*/index.html
	varpro=window.location.protocol;
	strRoot= varpro + "//" + varhost + "/" + varpath.substring(1,varpath.lastIndexOf('/')+1);
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
}
////以上JS代码目的是取得 strRoot 的值 
////////////////////////////////////////////////
</script>

以上完成后,index.html代码将成为如下内容：

<html>
<head>
</head>
<script language="javascript" type ="text/javascript">
///////////////////////////////////////////////////////////////////
///以下代码采用JS自动检测浏览器地址栏的根地址,并返回相关数据
var varpath = decodeURI(window.location.pathname);
var varhost=window.location.host; 
var strRoot;
if (varhost=='')
{
	//使用本地机地址打开此页面，地址类似于：file:///c:/***/index.html	
	strRoot = varpath.substring(1,varpath.lastIndexOf('/')+1);//取得打开、保存路径 
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
	
}else
{
	//使用网络地址运行本页面,地址类似于: http://localhost/*/index.html
	varpro=window.location.protocol;
	strRoot= varpro + "//" + varhost + "/" + varpath.substring(1,varpath.lastIndexOf('/')+1);
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
}
////以上JS代码目的是取得 strRoot 的值 
////////////////////////////////////////////////
</script>
<body><a href="WebView://|Officectrl.com|DocType:doc&-&OpenUrl:http://www.officectrl.com/weboffice/temp/file1.doc">查看</a>
</body>
</html>

2.2、构造查看链接的地址

通过jsfile接口指定weboffice.js文件地址，weboffice.js文件如果用记事本生成一般默认编码为ANSI格式，智能窗加载weboffice.js后，执行里面OpenFile函数，所以基本写法如下：

jsfile:weboffice.js所在地址;

jsutf8:0;

jsonload:OpenFile;

将上述接口用&-&连接符连起来后生成一个JS字符串

var strUrl= 'jsfile:weboffice.js&-&jsutf8:0&-&jsonload:OpenFile';

本教程实际使用如下代码:

var strUrl = 'BaseAddr:'+strRoot;//BaseAddr  一般是项目的发布路径 strRoot 的值，strRoot 的值通过浏览器地址栏检测出，也可以直接由程序写定。
strUrl = strUrl + '&-&jsfile:BaseAddr:weboffice.js';//jsfile指定控件运行的Javascript API接口函数库的js代码文件名称 BaseAddr: 经控件解析执行后即为上面 strRoot 的值
strUrl = strUrl + '&-&jsutf8:0';//Javascript API接口函数库的js代码文件的编码格式 当值为1时表示是：utf-8，0为gb2312
strUrl = strUrl +'&-&jsonload:OpenFile';

将以上代码加入到前面2.1步所得的strRoot值后面,完成后如下：

<html>
<head>
</head>
<script language="javascript" type ="text/javascript">
///////////////////////////////////////////////////////////////////
///以下代码采用JS自动检测浏览器地址栏的根地址,并返回相关数据
var varpath = decodeURI(window.location.pathname);
var varhost=window.location.host; 
var strRoot;
if (varhost=='')
{
	//使用本地机地址打开此页面，地址类似于：file:///c:/***/index.html	
	strRoot = varpath.substring(1,varpath.lastIndexOf('/')+1);//取得打开、保存路径 
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
	
}else
{
	//使用网络地址运行本页面,地址类似于: http://localhost/*/index.html
	varpro=window.location.protocol;
	strRoot= varpro + "//" + varhost + "/" + varpath.substring(1,varpath.lastIndexOf('/')+1);
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
}
////以上JS代码目的是取得 strRoot 的值 
////////////////////////////////////////////////
var strUrl = 'BaseAddr:'+strRoot;//BaseAddr  一般是项目的发布路径 strRoot 的值，strRoot 的值通过浏览器地址栏检测出，也可以直接由程序写定。
strUrl = strUrl + '&-&jsfile:BaseAddr:weboffice.js';//jsfile指定控件运行的Javascript API接口函数库的js代码文件名称 BaseAddr: 经控件解析执行后即为上面 strRoot 的值
strUrl = strUrl + '&-&jsutf8:0';//Javascript API接口函数库的js代码文件的编码格式 当值为1时表示是：utf-8，0为gb2312
strUrl = strUrl +'&-&jsonload:OpenFile'; 
</script>
<body><a href="WebView://|Officectrl.com|DocType:doc&-&OpenUrl:http://www.officectrl.com/weboffice/temp/file1.doc">查看</a>
</body>
</html>

2.3、修改查看链接为JS事件打开

将index.html里的查看链接代码部分：

 <a href="WebView://|Officectrl.com|DocType:doc&-&OpenUrl:http://www.officectrl.com/weboffice/temp/file1.doc">查看</a>

做如下修改：

 <a href="javascript:OpenDoc();">查看</a>

并在<scrip>标签里加入JS函数OpenDoc(),写入如下代码：

function OpenDoc()

{

window.open('WebView://|Officectrl.com|' + encodeURI(strUrl),'_self');

}

以上完成后，index.html代码将变为如下：

<html>
<head>
</head>
<script language="javascript" type ="text/javascript">
///////////////////////////////////////////////////////////////////
///以下代码采用JS自动检测浏览器地址栏的根地址,并返回相关数据
var varpath = decodeURI(window.location.pathname);
var varhost=window.location.host; 
var strRoot;
if (varhost=='')
{
	//使用本地机地址打开此页面，地址类似于：file:///c:/***/index.html	
	strRoot = varpath.substring(1,varpath.lastIndexOf('/')+1);//取得打开、保存路径 
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
	
}else
{
	//使用网络地址运行本页面,地址类似于: http://localhost/*/index.html
	varpro=window.location.protocol;
	strRoot= varpro + "//" + varhost + "/" + varpath.substring(1,varpath.lastIndexOf('/')+1);
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
}
////以上JS代码目的是取得 strRoot 的值 
////////////////////////////////////////////////
var strUrl = 'BaseAddr:'+strRoot;//BaseAddr  一般是项目的发布路径 strRoot 的值，strRoot 的值通过浏览器地址栏检测出，也可以直接由程序写定。
strUrl = strUrl + '&-&jsfile:BaseAddr:weboffice.js';//jsfile指定控件运行的Javascript API接口函数库的js代码文件名称 BaseAddr: 经控件解析执行后即为上面 strRoot 的值
strUrl = strUrl + '&-&jsutf8:0';//Javascript API接口函数库的js代码文件的编码格式 当值为1时表示是：utf-8，0为gb2312
strUrl = strUrl +'&-&jsonload:OpenFile';
function OpenDoc()
{
window.open('WebView://|Officectrl.com|' + encodeURI(strUrl),'_self');
}
</script>
<body><a href="javascript:OpenDoc();">查看</a>
</body>
</html>

3、运行测试

双击index.html启动浏览器查看，点击查看链接以看到效果。

本示例下载地址:引入JS文件打开文档。

动态传入打开地址和文档类型

1、将weboffice.js文件里的OpenFile函数修改成如下：

function OpenFile()
{
	WebOffice.Open(strOpenUrl,false,doctype)
}

2、将index.html里JS代码的构造查看链接增加OpenUrl和DocType接口，增加如下两行代码：

strUrl = strUrl +'&-&OpenUrl:http://www.officectrl.com/weboffice/temp/file1.doc';

strUrl = strUrl +'&-&DocType:doc';

完成后，index.html代码如下：

<html>
<head>
</head>
<script language="javascript" type ="text/javascript">
///////////////////////////////////////////////////////////////////
///以下代码采用JS自动检测浏览器地址栏的根地址,并返回相关数据
var varpath = decodeURI(window.location.pathname);
var varhost=window.location.host; 
var strRoot;
if (varhost=='')
{
	//使用本地机地址打开此页面，地址类似于：file:///c:/***/index.html	
	strRoot = varpath.substring(1,varpath.lastIndexOf('/')+1);//取得打开、保存路径 
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
	
}else
{
	//使用网络地址运行本页面,地址类似于: http://localhost/*/index.html
	varpro=window.location.protocol;
	strRoot= varpro + "//" + varhost + "/" + varpath.substring(1,varpath.lastIndexOf('/')+1);
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
}
////以上JS代码目的是取得 strRoot 的值
////////////////////////////////////////////////
var strUrl = 'BaseAddr:'+strRoot;//BaseAddr  一般是项目的发布路径 strRoot 的值，strRoot 的值通过浏览器地址栏检测出，也可以直接由程序写定。
strUrl = strUrl + '&-&jsfile:BaseAddr:weboffice.js';//jsfile指定控件运行的Javascript API接口函数库的js代码文件名称 BaseAddr: 经控件解析执行后即为上面 strRoot 的值
strUrl = strUrl + '&-&jsutf8:0';//Javascript API接口函数库的js代码文件的编码格式 当值为1时表示是：utf-8，0为gb2312
strUrl = strUrl +'&-&jsonload:OpenFile'; 
strUrl = strUrl +'&-&OpenUrl:http://www.officectrl.com/weboffice/temp/file1.doc';
strUrl = strUrl +'&-&DocType:doc';
function OpenDoc()
{
window.open('WebView://|Officectrl.com|' + encodeURI(strUrl),'_self');
}
</script>
<body><a href="javascript:OpenDoc();">查看</a>
</body>
</html>

完成以上步骤后可以测试效果。本示例下载地址:lession2_05.rar。

3、为实现动态传入打开文档地址，可以进将上述代码进一步改进如下：

<html>
<head>
</head>
<script language="javascript" type ="text/javascript">
///////////////////////////////////////////////////////////////////
///以下代码采用JS自动检测浏览器地址栏的根地址,并返回相关数据
var varpath = decodeURI(window.location.pathname);
var varhost=window.location.host; 
var strRoot;
if (varhost=='')
{
	//使用本地机地址打开此页面，地址类似于：file:///c:/***/index.html	
	strRoot = varpath.substring(1,varpath.lastIndexOf('/')+1);//取得打开、保存路径 
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
	
}else
{
	//使用网络地址运行本页面,地址类似于: http://localhost/*/index.html
	varpro=window.location.protocol;
	strRoot= varpro + "//" + varhost + "/" + varpath.substring(1,varpath.lastIndexOf('/')+1);
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
}
////以上JS代码目的是取得 strRoot 的值
////////////////////////////////////////////////
var strUrl = 'BaseAddr:'+strRoot;//BaseAddr  一般是项目的发布路径 strRoot 的值，strRoot 的值通过浏览器地址栏检测出，也可以直接由程序写定。
strUrl = strUrl + '&-&jsfile:BaseAddr:weboffice.js';//jsfile指定控件运行的Javascript API接口函数库的js代码文件名称 BaseAddr: 经控件解析执行后即为上面 strRoot 的值
strUrl = strUrl + '&-&jsutf8:0';//Javascript API接口函数库的js代码文件的编码格式 当值为1时表示是：utf-8，0为gb2312
strUrl = strUrl +'&-&jsonload:OpenFile'; 
function OpenDoc(docfile,doctype)
{
strUrl = strUrl +'&-&OpenUrl:http://www.officectrl.com/weboffice/temp/'+docfile;
strUrl = strUrl +'&-&DocType:'+doctype;
window.open('WebView://|Officectrl.com|' + encodeURI(strUrl),'_self');
}
</script>
<body><a href="javascript:OpenDoc('file1.doc','doc');">查看</a>
</body>
</html>

完成以上步骤后可以测试效果。本示例下载地址:lession2_06.rar。

动态路径打开文档

1、建立file1.doc

在index.html和weboffice.js文件夹里建立一个DOC文件，文件名称为：file1.doc

2、将上面示例index.html里的代码

strUrl = strUrl +'&-&OpenUrl:http://www.officectrl.com/weboffice/temp/'+docfile;

修改为：

strUrl = strUrl +'&-&OpenUrl:BaseAddr:'+docfile;

完成后，index.html代码成如下：

<html>
<head>
</head>
<script language="javascript" type ="text/javascript">
///////////////////////////////////////////////////////////////////
///以下代码采用JS自动检测浏览器地址栏的根地址,并返回相关数据
var varpath = decodeURI(window.location.pathname);
var varhost=window.location.host; 
var strRoot;
if (varhost=='')
{
	//使用本地机地址打开此页面，地址类似于：file:///c:/***/index.html	
	strRoot = varpath.substring(1,varpath.lastIndexOf('/')+1);//取得打开、保存路径 
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
	
}else
{
	//使用网络地址运行本页面,地址类似于: http://localhost/*/index.html
	varpro=window.location.protocol;
	strRoot= varpro + "//" + varhost + "/" + varpath.substring(1,varpath.lastIndexOf('/')+1);
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
}
////以上JS代码目的是取得 strRoot 的值
////////////////////////////////////////////////
var strUrl = 'BaseAddr:'+strRoot;//BaseAddr  一般是项目的发布路径 strRoot 的值，strRoot 的值通过浏览器地址栏检测出，也可以直接由程序写定。
strUrl = strUrl + '&-&jsfile:BaseAddr:weboffice.js';//jsfile指定控件运行的Javascript API接口函数库的js代码文件名称 BaseAddr: 经控件解析执行后即为上面 strRoot 的值
strUrl = strUrl + '&-&jsutf8:0';//Javascript API接口函数库的js代码文件的编码格式 当值为1时表示是：utf-8，0为gb2312
strUrl = strUrl +'&-&jsonload:OpenFile'; 
function OpenDoc(docfile,doctype)
{
strUrl = strUrl +'&-&OpenUrl:BaseAddr:'+docfile;
strUrl = strUrl +'&-&DocType:'+doctype;
window.open('WebView://|Officectrl.com|' + encodeURI(strUrl),'_self');
}
</script>
<body><a href="javascript:OpenDoc('file1.doc','doc');">查看</a>
</body>
</html>

完成以上步骤后可以测试效果。本示例下载地址:lession2_07.rar。

动态返回服务器端的JS文档

1、设置服务器B/S结构访问本示例

将上面动态路径打开文档所建立的文件夹设置服务器运行环境，即可以通过 http://localhost/index.html的形式访问。本节教程假定采用的是IIS服务器，脚本语言为c#。

2、生成weboffice.js.aspx文件

在index.html所在文件夹里生成weboffice.js.aspx文件，代码如下：

function OpenFile()

{

WebOffice.Open('<%=request("file")%>',false,'<%=request("doctype")%>');

}

3、修改index.html文件代码：

3.1、将代码：

strUrl = strUrl + '&-&jsfile:BaseAddr:weboffice.js';

修改为：

strUrl = strUrl + '&-&jsfile:BaseAddr:weboffice.js.aspx?file=BaseAddr:'+docfile+'&doctype='+doctype;//jsfile指定控件运行的Javascript API接口函数库的js代码文件名称 BaseAddr: 经控件解析执行后即为上面 strRoot 的值

3.2、清除OpenFile函数里的OpenUrl,DocType接口代码

strUrl = strUrl +'&-&OpenUrl:BaseAddr:'+docfile;

strUrl = strUrl +'&-&DocType:'+doctype;

3.3、将以下代码移动到OpenFile函数里

var strUrl = 'BaseAddr:'+strRoot;//BaseAddr 一般是项目的发布路径 strRoot 的值，strRoot 的值通过浏览器地址栏检测出，也可以直接由程序写定。

strUrl = strUrl + '&-&jsutf8:0';//Javascript API接口函数库的js代码文件的编码格式当值为1时表示是：utf-8，0为gb2312

strUrl = strUrl +'&-&jsonload:OpenFile';

完成后index.html代码如下：

<html>
<head>
</head>
<script language="javascript" type ="text/javascript">
///////////////////////////////////////////////////////////////////
///以下代码采用JS自动检测浏览器地址栏的根地址,并返回相关数据
var varpath = decodeURI(window.location.pathname);
var varhost=window.location.host; 
var strRoot;
if (varhost=='')
{
	//使用本地机地址打开此页面，地址类似于：file:///c:/***/index.html	
	strRoot = varpath.substring(1,varpath.lastIndexOf('/')+1);//取得打开、保存路径 
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
	
}else
{
	//使用网络地址运行本页面,地址类似于: http://localhost/*/index.html
	varpro=window.location.protocol;
	strRoot= varpro + "//" + varhost + "/" + varpath.substring(1,varpath.lastIndexOf('/')+1);
	if (strRoot =='')strRoot = varpath.substring(1,varpath.lastIndexOf('\\')+1);
}
////以上JS代码目的是取得 strRoot 的值
////////////////////////////////////////////////
function OpenDoc(docfile,doctype)
{
var strUrl = 'BaseAddr:'+strRoot;//BaseAddr  一般是项目的发布路径 strRoot 的值，strRoot 的值通过浏览器地址栏检测出，也可以直接由程序写定。
strUrl = strUrl + '&-&jsfile:BaseAddr:weboffice.js.aspx?file=BaseAddr:'+docfile+'&doctype='+doctype;//jsfile指定控件运行的Javascript API接口函数库的js代码文件名称 BaseAddr: 经控件解析执行后即为上面 strRoot 的值
strUrl = strUrl + '&-&jsutf8:0';//Javascript API接口函数库的js代码文件的编码格式 当值为1时表示是：utf-8，0为gb2312
strUrl = strUrl +'&-&jsonload:OpenFile';  
window.open('WebView://|Officectrl.com|' + encodeURI(strUrl),'_self');
}
</script>
<body><a href="javascript:OpenDoc('file1.doc','doc');">查看</a>
</body>
</html>

4、测试

完成以上内容后，通过Web服务器远程访问index.html测试。

本示例下载地址:动态返回服务器端的JS文档。