JavaScript

编程指南

WebOffice控件网

电子邮件：53928716@qq.com,support@officectrl.com

销售与技术开发支持网站：http://www.officectrl.com

未经许可,请勿分发本文档的部分或全部

文档使用说明：

本文档全面介绍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('http://www.officectrl.com/officecs/temp/word.doc');

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

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

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

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

function WebOpen()

{

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

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

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

}

function OpenDocument()

{

try{

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

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

}catch(e) {

alert(e);

}

</script>

二、宏编程与JavaScript编码的转换

WebOffice控件提供了ActiveDocument属性，此属性是微软Office系列软件Word,Excel编程扩展根对象，这些对象的参考方法可以参考微软的VBA编程手册，网上的具体地址是：https://docs.microsoft.com/zh-cn/office/vba/api/overview/

如果是打开了 Word文档，ActiveDocument属性就是一个Word的Document对象。

如果是打开了 Excel电子表，ActiveDocument属性就是一个Excel的WorkBook对象

上述Document对象和WorkBook对象不了解可以参考网址:

https://docs.microsoft.com/zh-cn/office/vba/api/overview/ 查找相关解析。

通过ActiveDocument属性可以实现宏方式的灵活编程应用，通过Word,Excel录制宏vba代码的方法后将此VBA代码转换成javascript的方法来实现让WebOffice更强大的扩展功能。宏中用到的是文字常量，比如，对于红色是wdRed,在将vba宏代码转换成javascript代码的过程中，需要将这些常量转换成对应的数字。这些数字的查找方法依然是访问微软VBA编程参考：

https://docs.microsoft.com/zh-cn/office/vba/api/overview/

打开上述网址的网页后，在右上角找到搜索框，通过搜索wdRed可以查找到此值：

上面红色箭头所指的网页即有关于wdRed数值为几的介绍。

同样道理，所有VBA宏代码里的常量和对象均可以通过此方法查找到答案。

另外，vba语法中有些命名参数的调用，比如，method a:=1,b:=2

这种调用方法是javascript不支持的。如果有这种情况，您需要同样用上述打开微软VBA编程网站的方法，查找到方法method的介绍，按照顺序传递给javascript参数，形式如：javascript_method(1,2) 这样方法。在VBA中，可选参数是可以省略的，但在javascript中，如果一个可选参数后面还有别的参数，您必须给前面省略的可选参数传递空值（null）。

三、调用WebBrowser智能窗实现跨浏览器

目前市场上Chrome和FireFox浏览器占有很大的份额，用户的电脑上同时安装了多个浏览器的情况是极为普遍的现象，并且很多用户喜欢和习惯使用Chrome浏览器，大部分的网站也以Chrome和Firefox浏览器为标准布局自己的网站页面，所以用户使用Chrome或Firefox看到的网页是最漂亮的，如果让用户在使用包含有在线文档处理功能的Web项目时必须用IE浏览器，那么Web项目的推行阻力是很大的。如果使用新版WebOffice，那么用户可以保持使用Chrome和FireFox的习惯，Web项目的推行完全不受浏览器的制约和影

响。

不同的浏览器针对JavaScript的onunload，onbeforeunload事件互不兼容的问题。WebBrowser提供了浏览器关闭的事件，可以保证在浏览器关闭的时候一定会触发开发人员希望执行的js代码，比如调用WebOffice提供的判断文件是否修改的属性，或提示用户保存等等需求。

如果采用智能窗方式浏览，对应的网址由传统网址：

http://www.officectrl.com/officecs/WebDocEdit.aspx?oper=edit&id=180形式，

修改为：

weboffice://|Officectrl|http://www.officectrl.com/officecs/WebDocEdit.aspx?oper=edit&id=180即可；

如果使用JS打开智能窗，可以如下方式编写：

以下代码假定：
http://www.officectrl.com/officecs/WebDocEdit.aspx?oper=edit&id=180

此网址对应网页包含控件,如果直接把上述网址放入Chrome或FireFox访问是无法看到控件的，采用智能窗方式则可以查看，所以应用下面JS访问：

function OpenWebOfficePage()

{

pre= " weboffice://|Officectrl| ";

strOpenUrl=pre + 'http://www.officectrl.com/officecs/WebDocEdit.aspx?oper=edit&id=180';

window.open(strOpenUrl,'_self');

}

四、自定义菜单并添加响应事件

控件默认自带了一个文件菜单，新增菜单可以方便用户对常用功能的操作，要实现此功能，应采用如下：

1、使用CustomMenuCount属性定义总菜单个数,由于控件默认自带了一个文件菜单，所以设置CustomMenuCount时应是：总个数-1，如新增一个菜单，则2-1=1,应设置CustomMenuCount=1;即：

document.getElementById('WebOffice').CustomMenuCount=1;

这样会在文件菜单旁新增一个菜单。

2、给新增的菜单设置菜单名称：

document.getElementById('WebOffice').SetMenuName(1,'新菜单');

3、调用WebAddMenuItem方法给新的菜单增加子菜单，WebAddMenuItem的第三个参数传入的是一个整数，以字符串的形式传递进去，这个整数必须大于50000，这个整数是用于后面点击时响应JS函数使用如：

document.getElementById('WebOffice').WebAddMenuItem(1, '打开Word','51001');
4、为新增的子菜单增加响应函数：

<!--

/*用switch语句执行菜单响应代码。 */

switch(param1)

{

case 51001:

alert('你点击“打开Word”菜单项');

break;

default:

break;

}

//-->

</script>

5、以上第一、二、三步的代码可以放在一个JS函数执行

function addMenu()

{

document.getElementById('WebOffice').CustomMenuCount=1;

document.getElementById('WebOffice').SetMenuName(1,'新菜单');

document.getElementById('WebOffice').WebAddMenuItem(1, '打开Word','51001');

}

</script>

五、常用功能函数使用

5.1、JavaScript控制文件菜单

/*************************************************************************使用SetSecurity(lFlag)接口实现文件菜单控制

lFlag的值参考如下：

新建 MNU_NEW                         1

打开 MNU_OPEN                        2

关闭 MNU_CLOSE                       4

保存 MNU_SAVE                        8

另存为 MNU_SAVEAS                    16

打印 MNU_PRINT                       32

页面设置 MNU_PGSETUP                 64

属性 MNU_PROPS                       128

如果不允许上面哪个功能，则用255减去对应值即可,可以累减实现几个功能的不允许

****************************************************************/

PrintNot 不允许打印

 function PrintNot() {

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

        WebOffice.SetSecurity(215); //不允许打印和保存

PrintYes 恢复打印许可

function PrintYes() {

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

        WebOffice.SetSecurity(247);//允许打印和不充许保存

SaveNot 不允许保存

function SaveNot() {

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

        WebOffice.SetSecurity(247);

SaveYes 允许保存

function SaveYes() {

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

        WebOffice.SetSecurity(255);

CreateNewNot 不允许新建

function CreateNewNot() {

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

        WebOffice.SetSecurity(254);

CreateNewYes 允许新建

function CreateNewYes() {

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

        WebOffice.SetSecurity(255);

OpenNot 不允许打开

function OpenNot() {

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

        WebOffice.SetSecurity(253);

OpenYes 允许打开

function OpenYes() {

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

        WebOffice.SetSecurity(255);

CloseNot 不允许关闭

function CloseNot() {

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

        WebOffice.SetSecurity(251);

CloseYes 允许关闭

function CloseYes() {

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

        WebOffice.SetSecurity(255);

5.2、控件界面控制

设置标题栏显示或隐藏

function setTitlebar(boolvalue) {

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

        WebOffice.Titlebar = boolvalue;

设置菜单显示或隐藏

function setMenubar(boolvalue) {

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

        WebOffice.MenuBar = boolvalue;

设置工具栏显示或隐藏

function setToolbar(boolvalue) {

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

        WebOffice.Toolbars = boolvalue;

控件界面标题栏和控件边框色彩自定义

function WebFace()

     WebOffice.BorderColor = 250*256*256+230*256+230; //里面数值可以按需调整

     WebOffice.ForeColor = 236*256*256+226*256+225;

WebOffice.TitlebarColor = 181*256*256+151*256+153;

5.3、新建、打开、保存

新建WORD文档

document.getElementById('WebOffice').CreateNew("Word.Document");

新建EXCEL文档

document.getElementById('WebOffice').CreateNew("Excel.Sheet");

新建PPT文档

document.getElementById('WebOffice').CreateNew("PowerPoint.Show");

打开本地文档

document.getElementById("WebOffice").Open("c:\\a.doc");

保存本地文档

document.getElementById("WebOffice").Save("c:\\a.doc");

另保存本地文档

document.getElementById("WebOffice").ActiveDocument.SaveAs("c:\\a.doc")

打开服务器文档

document.getElementById("WebOffice").Open("http://www.officectrl.com/officecs/temp/word.doc",true,"Word.Document");

打开服务器文档

document.getElementById("WebOffice").WebLoadFile("http://www.officectrl.com/officecs/temp/word.doc","xls");

Save方法保存服务器文档

//strSaveUrl为服务器端脚本程序用于接收上传过来的二进制文档数据并保存

var strSaveUrl=http://www.officectrl.com/officecs/upload.jsp?id=1

document.getElementById('WebOffice').Save(strSaveUrl);

HttpPost方法保存服务器文档，仿浏览器表单上传文件方式

var strSaveUrl=http://www.officectrl.com/officecs/post.jsp?id=1

document.getElementById("WebOffice").HttpInit();

document.getElementById("WebOffice").HttpAddPostCurrFile("docfile", ""); //执行此句会将当前编辑的文档读取到待上传文件列表

document.getElementById("WebOffice").HttpPost(strSaveUrl); //执行模拟表单POST上传动作

Close 关闭文档

document.getElementById("WebOffice").WebOffice.Close();

5.4、控件功能控制

CopyNot 不允许复制

document.getElementById("WebOffice").isNotCopy=1;

CopyYes 允许复制

document.getElementById("WebOffice").isNotCopy=0;

下载文档

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

WebOffice.DownloadFile(‘URL文档路径’,‘本地保存地址’);

删除本地文档

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

WebOffice.DeleteLocalFile(‘本地地址’);

5.5、智能填充

一、设置模板上需要填充内容的标签

    将光标放到WORD模板的指定位置，然后运行：

   document.getElementById("WebOffice").SetFieldValue('mark_1','','::ADDMARK::');

   这样将在Word模板的光标位置加入一个名为mark_1的书签

二、使用模板后，将模板上的指定的mark_1标签替换成数据库或服务器端的内容

//dataValue用于存储从数据库或服务器端传过来的数据

var dataValue='abc';

document.getElementById("WebOffice").SetFieldValue('mark_1','','::GETMARK::');

document.getElementById("WebOffice").SetFieldValue('mark_1',dataValue,'::ADDMARK::');

5.6、合并文档

光标当前位置插入WORD文档

document.getElementById("WebOffice").InsertFile(strPath,0);

5.7、加入URL图片

 加入远程 URL 图片

Var weboffice = document.getElementById("WebOffice");

var strFile = WebOffice.WebSignTempFile;

WebOffice.DownloadFile('http://www.officectrl.com/officecs/images/weboffice.jpg',strFile);

WebOffice.SetFieldValue('mark_1','','::ADDMARK::');

WebOffice.SetFieldValue('mark_1',strFile,'::JPG::');

5.8、痕迹保留

让进入文档痕迹保留状态

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

        WebOffice.SetTrackRevisions(1)

隐藏文档痕迹

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

        WebOffice.ShowRevisions(0);

显示文档痕迹

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

       WebOffice.ShowRevisions(1);

 退出痕迹保留状态

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

       WebOffice.SetTrackRevisions(0);

 接受所有修改内容

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

        WebOffice.SetTrackRevisions(4);

接受当前显示的修改内容

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

        WebOffice.ActiveDocument.AcceptAllRevisionsShown();

不接受所有修改的内容

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

        WebOffice.ActiveDocument.RejectAllRevisions();

痕迹统计

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

        WebOffice.showdialog(6);

5.9、键盘批注

添加键盘批注

//user为作者名称,info为要添加键盘批注的具体内容

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

WebOffice.GetApplication.username=User;

WebOffice.GetApplication.Selection.Comments.Add(WebOffice.GetApplication.Selection.Range,info);

5.10、电子章

//这里可以加JS密码认证等

var strFile = WebOffice.WebSignTempFile;

WebOffice.DownloadFile('图片章URL地址',strFile);

WebOffice.SetFieldValue('mark_1','','::ADDMARK::');

WebOffice.SetFieldValue('mark_1',strFile,'::FLOATJPG::');

//加章后可以加入文档密码保护等功能语句

WebOffice.ProtectDoc(1,1,pwd);//pwd为密码值

//如要重新修改文档可以解保护

WebOffice.ProtectDoc(0,1,pwd); //pwd为保护文档使用的密码值

//加章后也可以把文档转为PDF具体如何转PDF可以参考WebOffice常用Javascript库或相关示例。

5.11、模板套红

一、setfieldvalue接口方式’

markname书签名称,strPath为DOC文件的路径如：http://www.officectrl.com/weboffice/temp/file1.doc

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

WebOffice.SetFieldValue(markname,'','::ADDMARK::');

WebOffice.SetFieldValue(markname,strPath,'::FILE::');

二、insertfile接口方式

strPath为DOC文件的路径如：http://www.officectrl.com/weboffice/temp/file1.doc

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

WebOffice.InsertFile(strPath,0);

三、vba方式

strValue='OfficeCTRL技术开发中心发文';

         var myRange=WebOffice.ActiveDocument.Range(0,0);

         myRange.Select();

         var mtext="★";

         WebOffice.ActiveDocument.Application.Selection.Range.InsertAfter (mtext+"\n");

         var myRange=WebOffice.ActiveDocument.Paragraphs(1).Range;

         myRange.ParagraphFormat.LineSpacingRule =1.5;

         myRange.font.ColorIndex=6;

         myRange.ParagraphFormat.Alignment=1;

         myRange=WebOffice.ActiveDocument.Range(0,0);

         myRange.Select();

         mtext="[２０16]１72号";

         WebOffice.ActiveDocument.Application.Selection.Range.InsertAfter (mtext+"\n");

         myRange=WebOffice.ActiveDocument.Paragraphs(1).Range;

         myRange.ParagraphFormat.LineSpacingRule =1.5;

         myRange.ParagraphFormat.Alignment=1;

         myRange.font.ColorIndex=1;

         mtext=strValue;

         WebOffice.ActiveDocument.Application.Selection.Range.InsertAfter (mtext+"\n");

         myRange=WebOffice.ActiveDocument.Paragraphs(1).Range;

         myRange.ParagraphFormat.LineSpacingRule =1.5;

         //myRange.Select();

         myRange.Font.ColorIndex=6;

         myRange.Font.Name="仿宋_GB2312";

         myRange.font.Bold=true;

         myRange.Font.Size=28;

         myRange.ParagraphFormat.Alignment=1;

         //myRange=myRange=WebOffice.ActiveDocument.Paragraphs(1).Range;

         WebOffice.ActiveDocument.PageSetup.LeftMargin=70;

         WebOffice.ActiveDocument.PageSetup.RightMargin=70;

         WebOffice.ActiveDocument.PageSetup.TopMargin=70;

         WebOffice.ActiveDocument.PageSetup.BottomMargin=70;

5.12、制作报表

制作报表时，可以要把制作的报表设计成HTML网页模板格式，然后通过WebaddHtml接口加即可，这样word会自动展示

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

WebOffice.WebAddHtml(strPath);

5.13、文档保护与解除保护

ProtectDOC 设置文档保护

//pwd用于设置保护文档的密码，可以空值

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

WebOffice.ProtectDoc(1,1,pwd);

UnProtectDOC 解除文档保护

//pwd用于解除文档保护的密码，此值应与设置文档保护时的密码一致

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

WebOffice.ProtectDoc(0,1,pwd);

5.14、区域编辑限制

一、使用Word工具栏自带的限制编辑功能设置好文档哪些位置是可以编辑的，这个如果不懂可以网络查找Word如何设置此功能。

二、让Word里设置好的限制编辑生效

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

//123为密码值

WebOffice.ActiveDocument.Application.ActiveDocument.Protect(3,0,"123",0,1);

三、解除限制

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

WebOffice.ActiveDocument.Application.ActiveDocument.UnProtect("123");//123为文档保护的密码

5.15、缩略图任意页生成

缩略图保存

function  saveThumbPic(flag,strSaveUrl) {

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

                 //word时 ThumbIndentx值设为300,具体多少可以看效果来调整宽度

                 //excel,ppt时 ThumbIndentx值设为0

                 //ThumbIndenty值一般为25，也可以看生成的效果图来调整高度

                 switch(flag)

                  case '1':

WebOffice.ThumbIndentx='300'; break;

                  case '2':

WebOffice.ThumbIndentx='0'; break;

                  case '3':

WebOffice.ThumbIndentx='0'; break;

                 WebOffice.ThumbIndenty='25';

                 var rss=WebOffice.WebThumbnail(1,strSaveUrl);

                 if(rss==''){alert('已生成成功，请确认！');}

*flag值1 word,2 excel,3,powerpoint

*strSaveUrl为jsp,php,aspx,node.js等的上传文件接收器,地址如：http://www.officectrl.com/officecs/upload.aspx?id=1 形式

*strSaveUrl对应接收器代码写法与用Save方法保存文件时的接收器写法一样的，只是一个保存WORD文档，另一个是保存图片，Save方法接收器写法示例已有写好可参考具体教程 ：http://www.officectrl.com/lession/2/webofficesave.html

*strSaveUrl对应接收器代码示例已有写好，可以下载综合示例：

*http://www.officectrl.com/down/webofficecs.rar后查看 pic.aspx

*http://www.officectrl.com/down/WebOfficeJsp-Mysql.rar后查看 uploadedit.jsp把代码里的 word或excel等扩展名改为.jpg即可用于此缩略图保存

*http://www.officectrl.com/down/WebOfficePhp-MySql.rar后查看 pic.php