利用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='编辑' onclick='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/webOffice SSLEngine off </VirtualHost>
Documentroot的路径即为插件程序所在的目录。SSLEngine off即关闭ssl而用http来访问。
还要注意要设置uploadfiles目录有可写的权限。
一切就绪后重启apache即可。
完整的示例与官方开发文档可以单击下面的链接进行下载。
http://pan.baidu.com/netdisk/singlepublic?fid=759613_3581574499
