利用WebOffice控件来进行编辑office文档。

最近项目中需要用到在线编辑Office文档。最后找来找去发现有个免费的控件“点聚WebOffice”。经过两天的测试发现还不错。虽然里面也有些不完善的地方。先说一下不足吧，想用的同学可以斟酌。

1、在Widnows 7 x64下运行不稳定，经常会导致ie浏览器崩溃。

2、打开的本地文件不能是2007新格式的文档，如：docx/xlsx。如果打开一个docx的文档，然后保存到服务器端时会发现没有任何数据（使用PHP时，查看$_FILES）。

3、客户端安装的即便是Office2010，通过控件新建一个文档，然后保存到服务器端时，格式还是2003以前的文档格式。即后缀还是使用doc/xls。

4、客户端安装的Office最好是完整版的，不要安装精简版的。会导致打不开应用程序（官方的QQ群里有些同学提出的此bug）。

5、控件不支持https。

下面是我使用PHP时的demo，此demo是根据官方提供的asp版来修改的，仅做了项目中用到的一部分，如：新建与编辑文档。

1、首先看一下目录结构：

在站点的根目录下weboffice_v6.0.5.0.cab是必须的，这样的话，当客户端没有安装控件时，我们就可以直接通过让浏览器下载此文件来安装。

2、开始编写demo.php页面，此页面有3个按钮：新建Word文档、新建Excel文档、刷新服务器端文件列表。

刷新服务器端文件列表按钮的作用是获取我们保存的文档列表，即uploadfiles目录下面的所有的文档。

当单击新建时会通过一个隐藏的form表单来打开一个新的页面（webOffice.php），通过GET方式传递fileType参数。fileType值为：doc或xls。

通过单击服务器端文件列表右侧的编辑按钮道理相同，仅传递的参数有所不同。编辑文件时只需要传递fileName即可。

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>WebOffice Demo</title>
 6 <script type="text/javascript">
 7     function editFile(path) {
 8         var f = document.myForm;
 9         f.action = 'webOffice.php?fileName=' + path;
10         f.target = '_blank';
11         f.submit();
12     }
13
14     function createFile(type) {
15         var f = document.myForm;
16         f.action = 'webOffice.php?fileType=' + type;
17         f.target = '_blank';
18         f.submit();
19     }
20 </script>
21 </head>
22
23 <body>
24 <form name="myForm" action="webOffice.php" method="post">
25     <input type="hidden" id="fileName" name="fileName" />
26     <input type="button" id="newDoc" name="newDoc" value="新建Word文档" onclick="createFile('doc')" />
27     <input type="button" id="newDoc" name="newDoc" value="新建Excel文档" onclick="createFile('xls')" />
28 </form>
29 <form action="?" method="post">
30 <input type="submit" id="getFiles" name="getFiles" value="刷新服务器端文件列表" />
31 </form>
32 <table border="1" width="400" cellspacing="0" cellpadding="0">
33     <tr>
34         <th>文件名称</th>
35         <th width=60>操作</th>
36     </tr>
37 <?php
38     if ($_POST['getFiles'] != '') {
39         $files = array();
40         $path = dirname(__FILE__) . "/uploadfiles";
41
42         if ($handle = opendir($path)) {
43             while (false !== ($file = readdir($handle))) {
44                 $ext = substr($file, -3);
45
46                 if ($ext == 'doc' || $ext == 'xls') {
47                     // 如果服务器是Windows，文件名称需要转换成UTF-8
48                     $files[] = $_ENV['OS'] == 'Windows_NT' ? iconv('GB18030', 'UTF-8//IGNORE', $file) : $file;
49                 }
50             }
51             closedir($handle);
52         }
53
54         if (count($files) > 0) {
55             foreach ($files as $file) {
56                 echo "<tr><td>$file</td><td><input type='button' value='编辑' οnclick='editFile(\"" . $file . "\")' /></td>";
57             }
58         }
59     }
60 ?>
61 </table>
62 </body>
63 </html>

3、编写webOffice.php页面。首先要嵌入webOffice控件，可以通过script标签来插入，官方提供的这个js文件其实很简单，就是输出一个object标签对象。在这里面需要注意的是控件的高度，最好不要使用100%而是使用一个固定的值，如果使用百分比，那么控件所属的容器就要指定高度。

1 var s = ""
2 s += "<object id=WebOffice1 height=586 width='100%' style='LEFT: 0px; TOP: 0px'  classid='clsid:E77E049B-23FC-4DB8-B756-60529A35FAD5' codebase=weboffice_v6.0.5.0.cab#Version=6,0,5,0>"
3 s +="<param name='_ExtentX' value='6350'><param name='_ExtentY' value='6350'>"
4 s +="</OBJECT>"
5 document.write(s)

嵌入控件之后要监听控件的NotifyCtrlReady事件，官方提供的方式是使用script标签的方式来监听，而不是通过attachEvent的方式，标签方式有一个优点即可以不必将代码写在嵌入控件之后，我们可以将其放在head部分。

 1 <SCRIPT LANGUAGE=javascript FOR=WebOffice1 EVENT=NotifyCtrlReady>
 2 <!--
 3     var fn = '<?php echo $fileName; ?>';
 4
 5     if (fn) {
 6         fn = './uploadfiles/' + fn;
 7     }
 8
 9     // 在装载完Weboffice(执行<object>...</object>)控件后执行 "WebOffice1_NotifyCtrlReady"方法
10     WebOffice1_NotifyCtrlReady(fn, "<?php echo $fileType; ?>");
11 //-->
12 </SCRIPT>

这个事件也就是调用WebOffice1_NotifyCtrlReady函数，而这个函数的作用则是根据fileName来判断是新建一个文档还是打开一个文档。

 1     /**
 2      * 控件初始化WebOffice方法
 3      * @param {String} fileName 要打开的文件名称
 4      * @param {String} fileType 要打开的文件类型，doc/
 5      */
 6     function WebOffice1_NotifyCtrlReady(fileName, fileType) {
 7         var office = document.all.WebOffice1;
 8         if (fileName) {
 9             office.LoadOriginalFile(fileName, fileType);
10         } else {
11             office.LoadOriginalFile("", fileType);
12         }
13     }

最后一步也就是如何保存到服务器端。要将文档保存到服务器端需要分四步走。

第一步，初始化HTTP。office.HttpInit();

第二步，由于weboffice的提交数据跟平常的form表单的提交没什么区别，因此我们可以在此进行附加一些其他的数据，如文件名。office.HttpAddPostString("fileName", fileName);

第三步，将我们需要保存的文档附加进来。office.HttpAddPostCurrFile("docContent", '');第二个参数就是以什么文件名传递给服务器，直接传递一个空字符串即可。

第四步，将数据提交到一个php接收页。office.HttpPost("./resources/php/upload.php");

这四步，除了第二步之外其他的三步都是必不可少的。

下面是webOffice.php页面的完整代码：

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>Office在线编辑器</title>
 6 </head>
 7 <?php
 8     $fileName = $_GET['fileName'];
 9
10     $fileType = $_GET['fileType'];
11
12     if ($fileType == '') {
13         $fileType = strtolower(substr($fileName, -3)) == 'doc' ? 'doc' : 'xls';
14     }
15 ?>
16 <script type="text/javascript">
17     /**
18      * 控件初始化WebOffice方法
19      * @param {String} fileName 要打开的文件名称
20      * @param {String} fileType 要打开的文件类型，doc/
21      */
22     function WebOffice1_NotifyCtrlReady(fileName, fileType) {
23         var office = document.all.WebOffice1;
24         if (fileName) {
25             office.LoadOriginalFile(fileName, fileType);
26         } else {
27             office.LoadOriginalFile("", fileType);
28         }
29     }
30
31     // 关闭页面时调用此函数，关闭文件
32     function window_onunload() {
33         document.all.WebOffice1.Close();
34     }
35
36     function SaveDoc() {
37         var fileType = '<?php echo $fileType; ?>',
38             fileName = document.myForm.fileName.value,
39             office   = document.all.WebOffice1;
40
41         if (!~fileName.indexOf('.' + fileType)) { fileName += '.' + fileType; }
42
43         office.HttpInit();
44
45         // 添加相应的Post元素
46         office.HttpAddPostString("fileName", fileName);
47
48         office.HttpAddPostCurrFile("docContent", '');        // 上传文件
49
50         var result = office.HttpPost("./resources/php/upload.php");
51
52         if("OK" == result){
53             alert("文件上传成功");
54             window.close();
55         }else
56             alert("文件上传失败")
57     }
58
59 </script>
60 <SCRIPT LANGUAGE=javascript FOR=WebOffice1 EVENT=NotifyCtrlReady>
61 <!--
62     var fn = '<?php echo $fileName; ?>';
63
64     if (fn) {
65         fn = './uploadfiles/' + fn;
66     }
67
68     // 在装载完Weboffice(执行<object>...</object>)控件后执行 "WebOffice1_NotifyCtrlReady"方法
69     WebOffice1_NotifyCtrlReady(fn, "<?php echo $fileType; ?>");
70 //-->
71 </SCRIPT>
72
73 <body onunload="window_onunload()">
74 <form name="myForm" method="post">
75     <label for="fileName">文件名：</label>
76     <input type="text" id="fileName" name="fileName" value="<?php echo $fileName; ?>" />
77     <input type="submit" id="saveFile" name="saveFile" value="保存文件到服务器" onclick="SaveDoc()" />
78 </form>
79 <script src="resources/js/LoadWebOffice.js"></script>
80 </body>
81 </html>

4、编写upload.php页面。即接收上传的文件并且保存到uploadfiles目录下。大家还是直接看代码吧，php上传没什么可说的，很简单，不像是ASP那么麻烦。

在upload.php页面中用到了一个uf.class.php类，我简单的封装的一个上传类。

uf.class.php

  1 <?php
  2     /**
  3      * PHP上传文件
  4      * 公开属性，overwrite，默认true
  5      */
  6     class uploadFile {
  7         private $name;                // 上传表单的name
  8         private $fileName;            // 文件名
  9         private $uploadDir;            // 文件存放目录
 10         private $type;                // 允许上传的文件类型
 11         public $overwrite;            // 是否覆盖已存在的文件
 12
 13         function __construct() {
 14             $this->name = 'file';
 15             $this->fileName = '';
 16             $this->uploadDir = 'D:/Codes/WebOffice/uploadfiles/';
 17             $this->type = array("xlsx", "doc", "docx", "xls");
 18             $this->overwrite = true;
 19         }
 20
 21         /**
 22          * 检测文件后缀
 23          * @param {String} $f 要检测的文件名称
 24          */
 25         public function fileExt($f) {
 26             return substr(strrchr($f, '.'), 1);
 27         }
 28
 29         /**
 30          * 设置上传表单的name
 31          * @param {String} $n 表单的name
 32          */
 33         public function setName($n) {
 34             if ($n == '') {
 35                 return false;
 36             } else {
 37                 $this->name = $n;
 38             }
 39         }
 40
 41         /**
 42          * 设置文件名
 43          * @param {String} $fn 文件名
 44          */
 45         public function setFileName($fn) {
 46             if ($fn == '') {
 47                 return false;
 48             }
 49             $this->fileName = $fn;
 50             return true;
 51         }
 52
 53         /**
 54          * 设置文件存放目录
 55          * @param {String} $p 文件存放目录
 56          */
 57         public function setPath($p) {
 58             if ($p == '') {
 59                 return false;
 60             }
 61             $this->uploadDir = $p;
 62             return true;
 63         }
 64
 65         /**
 66          * 设置允许上传的文件格式
 67          * @param {Array} $t 文件格式数组
 68          */
 69         public function setFileType($t) {
 70             if (is_array($t)) {
 71                 $this->type = $t;
 72                 return true;
 73             } else {
 74                 return false;
 75             }
 76         }
 77
 78         /**
 79          * 上传文件
 80          */
 81         public function upload() {
 82             if ($this->fileName == '') {
 83                 $this->fileName = $_FILES[$this->name]['name'];
 84             }
 85
 86             //判断文件类型
 87             /*if(!in_array(strtolower($this->fileExt($_FILES[$this->name]['name'])), $this->type)) {
 88                 echo "<script>alert('您只能上传以下类型文件: ".implode(",",$this->type)."');</script>";
 89                 return '';
 90             } else {*/
 91                 $uploadfile = $this->uploadDir.$this->fileName;
 92
 93                 if (!$this->overwrite && file_exists($uploadfile)) {
 94                     /*echo "<script>alert('文件已经存在！');</script>";*/
 95                     return '';
 96                 }
 97
 98                 if (move_uploaded_file($_FILES[$this->name]['tmp_name'], $uploadfile)) {
 99                     /*echo "<script>alert('上传成功！');</script>";*/
100                     return $uploadfile;
101                 }
102             /*}*/
103         }
104     }
105 ?>

 1 <?php
 2     require_once('uf.class.php');
 3     $upload = new uploadFile();
 4     $upload->setName('docContent');
 5     if ($_ENV['OS'] != 'Windows_NT') {
 6         $upload->setPath('/var/ins-g/webOffice/uploadfiles/');
 7     }
 8     $upload->setFileName($_POST['fileName']);
 9     $result = $upload->upload();
10
11     echo "OK";
12 ?>

5、如果有同学跟我一样，项目是跑在https下，但此控件又不支持https，所以我们还是创建一个虚拟主机来专门的跑这个在线编辑。这也是没有办法的办法。

找到apache的配置文件httpd.conf。在最后添加以下几行配置信息。

Listen 88
<VirtualHost *:88>DocumentRoot /var/ins-g/webOfficeSSLEngine off
</VirtualHost>

Documentroot的路径即为插件程序所在的目录。SSLEngine off即关闭ssl而用http来访问。

还要注意要设置uploadfiles目录有可写的权限。

一切就绪后重启apache即可。

完整的示例与官方开发文档可以单击下面的链接进行下载。

http://pan.baidu.com/netdisk/singlepublic?fid=759613_3581574499

转载于:https://www.cnblogs.com/AUOONG/archive/2012/07/28/2612884.html

利用WebOffice控件来进行编辑office文档。相关推荐

在线编辑Office文档软件——WebOffice，常见问答来帮你！
WebOffice控件是国内领先的在线编辑Office文档软件,软件产品从1998年立项至今已有20多年历史,期间服务了众多大中小型企业.各级政府机关.科研机构和学校等事业单位.全新的WebOffic ...
在线编辑office文档笔记
了解到的相关office在线编辑工具一.weboffice 收费通过activeX在浏览器上实现,在其他浏览器兼容性比较差:集成了盖章.套红等功能二.pageoffice 收费(3种收费中功能最 ...
WEB前端实现在线预览、编辑Office文档
这篇文章介绍如何在web前端引入JS插件实现在线预览.编辑Office文档. 使用插件:Spire.Cloud在线Office文档编辑器(官网:冰蓝科技在线编辑) 重点:该方案仅需浏览器支持HTML5 ...
如何在线编辑Office文档
Office文档是我们办公中最常用的文件格式之一,它可以通过Microsoft Office应用程序创建和编辑,但前提是需要先将Microsoft Office下载并安装到系统中.如果系统中没有或者无 ...
jsp+java用pageoffice在线编辑office文档
首先你要有三个东西:sealsetup.exe.pageoffice.jar和posetup.exe,如果没有,就去 http://www.zhuozhengsoft.com/download ...
【delphi】腾讯云短信发送控件（源代码、帮助文档、演示程序）
1. 腾讯云短信控件在开发小程序注册的时候,需要发送短信,所以就专门开发了腾讯云的短信发送控件,这样发送短信就可以直接使用,不需要再进行签名等麻烦的开发了,只需要设置几个简单参数即可. 1.1 控件 ...
dsoframer-在线编辑office文档，一款开源的由微软提供
office 文档在线编辑的功能,,大多使用OCX中间间,希望找一个开源免费的, 国内: dsoframer.ocx: WebOffice.ocx EhaiOfficeOnWeb.ocx office ...
python能做的100件事-01-python处理office文档
文章目录 0. 环境说明 1. python处理word文档 1.1 基础操作 1.2关于基础操作的补充: 1.2.1关于Document对象: 1.2.2 关于段落属性的设置 1.2.3 样式设置 ...
Office Online Server 在线编辑Office文档，安装部署
一.Office Online Server介绍 Office Online Server是 Office Web Apps Server 的升级版本,安装环境必须为两台Windows Server ...

利用WebOffice控件来进行编辑office文档。

利用WebOffice控件来进行编辑office文档。相关推荐

最新文章

热门文章