zoukankan      html  css  js  c++  java
  • 利用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

  • 相关阅读:
    Spinnerd的功能和用法
    vagrant up ----失败 问题解决
    Yii2.0基础框架
    linux上nginx新建站点
    vagrant(二)配置文件vagrantfile详解 以及安装php、nginx、mysql
    vagrant(一)初识与安装
    cmd 使用gii的命令行用法
    mysql 使用shell时出现 ERROR 2006 (HY000): MySQL server has gone away 解决方法
    c++ virtual总结
    kartikgridGridView 合计,多选,导出excel,header修改 等方法集合!
  • 原文地址:https://www.cnblogs.com/AUOONG/p/2612884.html
Copyright © 2011-2022 走看看