js导出HTML的Table到Excel中

 

数据报表作为企事业单位上报和下达的重要信息载体，随着信息化建设的不断推进，在实际的工作中得到了前所未有的应用。因此，数据报表已经成为管理信息系统中重要的一项功能，并且，由于数据的多样性和统计信息的增加，数据报表的系统实现变得越来越复杂。
    Microsoft Excel 软件具有十分强大的制表、表格计算等功能，是普通人员常用的制表工具。因此Excel在众多企业中的应用十分广泛。当企业进行信息化建设时，必然需要将Excel的数据导入到信息化系统中去，或将数据导出到Excel中来。如果信息化系统采用C/S结构，导出数据到Excel还比较好说，采用B/S结构就不好说了，相关的资料非常的少。

    下面本文将介绍一种使用javascript将HTML的Table数据导出到Excel的方法。

    1． 用javascript操作Excel
    Excel是一个Com，因此我们在javascript中像其他的开发语言一样创建Excel对象，从而获得访问Excel的能力。
     var xls = new ActiveXObject( "Excel.Application" );
    上面这句话就创建了一个Excel的Application对象。
     var xlBook = xls.Workbooks.Add;
    上面这句话增加一个Excel的WorkBook。
     var xlsheet = xlBook.Worksheets(1);
    上面这句话获得WorkBook的Sheet1对象。
     通过xlsheet.Cells(X, Y)可以访问Sheet中的单元格对象，其中X, Y是单元格的坐标位置。
     Cell对象有很多属性和方法，这里我们将使用到Cell的Value属性，Border属性等。下面给出Cell对象三个常用的属性：
       Cell的Value属性是指表格中的字符串值。
       Cell的Interiro.color属性是指单元格的背景色，例如：
      xlsheet.Cells(CurX, CurY).Interior.color = 0x00FF66;
      Cell的Borders.LineStyle属性是指单元格的边框样式，该属性是整型值，0表示没有边框，1表示Solid形变框，其他的数字则表示其他的边框类型，大家可以逐个试一下。例如：
      xlsheet.Cells(CurX, CurY).Borders.LineStyle = 1;
    同时Cell还有其它的属性，例如单元格格式等其他属性，有兴趣的朋友可以查找相关的资料。

    2． 用javascript获得Table的信息
    在javascript中我们可以通过定义Table的id，来访问Table的相关信息，Table具有以下一些对象：
      rows对象：行集对象，保存了TR的相关信息，其中用rows[RowIndex]即可访问对应的TR的信息，rows.length返回了Table中的TR的个数，也就是行的个数。
      cells对象：单元格对象，保存了TD的相关信息。cells对象存在于rows[RowIndex]对象中，访问时得通过具体的rows对象来访问，例如访问第一行的表格对象：rows[0].cells；cells.length返回了cells对象所属行中的TD的个数，cells[ColIndex]则对应具体的TD的信息。cells[ColIndex].outerHTML返回了TD的定义语句，cells[ColIndex].innerHTML返回了TD中的内容。例如TD的定义如下：
      <TD width=80>单元格定义</TD>
    则cells[ColIndex].outerHTML返回的结果是“<TD width=80>单元格定义</TD>”，cells[ColIndex].innerHTML返回的结果是“单元格定义”

    3． 用javascript遍历HTML中的Table
    了解了Table的属性以后，我们就可以用javascript来遍历Table的每一个单元格了，下面是遍历的程序，具体的例子代码请查看附录1
function AccessALLTable(objTab)
{
  for (var i = 0; i < objTab.rows.length; i++)
  {  
    for (var j = 0; j < objTab.rows[i].cells.length; j++)
    {
      s = objTab.rows[i].cells[j].outerHTML;
      alert("第" + i + "行，第" + j + "列：outerHTML为" + s);
      s = objTab.rows[i].cells[j].outerHTML;
      alert("第" + i + "行，第" + j + "列：innerHTML为" + s);
    }
  }
}

    4． 合并单元格
    在HTML的Table中，合并单元格是很简单的事情，只需要指定TD的colspan或者rowspan即可跨行或者跨列，而在Excel中，合并单元格需要先指定Range（范围），例如，合并从Cells(0, 0)到Cells(2, 2)的单元格，则在javascript中这样写就可以了：
      xls.Range(xls.Cells(0, 0), xls.Cells(2, 2)).MergeCells = true;
    Range同时还是一个对象，我们可以声明一个变量来取出Range对象，并设置对象的相关属性，例如：
      var R = xls.Range(xls.Cells(0, 0), xls.Cells(2, 2));
      R.MergeCells = true;

    5． 导出HTML的Table到Excel中去
    有了上面的知识，我们就可以开始用javascript导出HTML的Table到Excel中去了。下面是导出的代码，具体的例子代码请查看附录1
function PrintTableToExcel(objTab)
{
  try 
  {
    var xls = new ActiveXObject( "Excel.Application" );
  }
  catch(e) 
  {
    alert( "要打印该表，您必须安装Excel电子表格软件，同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。请点击【帮助】了解浏览器设置方法！");
    return false;
  }
  xls.visible = true;
  var xlBook = xls.Workbooks.Add;
  var xlsheet = xlBook.Worksheets(1);
  var x = 1;
  var y = 1;
  for (var i = 0; i < objTab.rows.length; i++)
  {
    y = 1;
    for (var j = 0; j < objTab.rows[i].cells.length; j++)
    {
      xlsheet.Cells(x, y).Value = objTab.rows[i].cells[j].innerHTML;
      xlsheet.Cells(x, y).Borders.LineStyle = 1;
      y++;
    }
    x++;
  }
  xlsheet.Columns.AutoFit; //自动适应大小
  return;
}

    6． 增强型的导出功能
    因为Excel可以合并单元格，所以我们可以根据TD的定义中是否有colspan或rowspan属性来判断是否需要合并单元格。但是colspan和rowspan这两个属性似乎在javascript中没有直接访问的方法，因此我们只能采用笨方法来获得colspan或rowspan的属性值。首先我们取出TD的定义字符串，然后在这个字符串中查找是否有"colspan="或"rowspan="的子串，如果有的话，则取出子串后面跟着的数字，该数字表明TD跨列或跨行的个数，具体的实现程序如下所示：
// Str – TD的定义字符串
// Prop – 属性值，可以是colspan、rowspan、border、width等数值型属性的名称
// 返回值是属性的值
// 例如TD的定义为<td width=100>xx</td>
// 则getPropValue("td width=100>xx</td>", "width")返回100
function getIntPropValue(Str, Prop)
{
  var s = Str.toUpperCase(Str);
  var p = Prop.toUpperCase(Prop);
  var idx = s.indexOf(p);
  var PropValue = "";
  if (idx >= 0)
  {
    var x = Prop.length;
    while ((Str.charAt(idx + x) < "0") || (Str.charAt(idx + x) > "9"))
    {
      x++;
    }
    while ((Str.charAt(idx + x) >= "0") && (Str.charAt(idx + x) <= "9"))
    {
      PropValue = PropValue + Str.charAt(idx + x);
      x++;
    }
    return PropValue;
  }
  else 
    return "0";
}
    同样，我们还可以把上面的函数改造一下，让它可以返回TD的align等字符串型的属性，这里就不再给出实现函数了。
有了上面的函数，我们就可以在导出Table到Excel时动态判断TD的colspan和rowspan属性，然后在Excel中合并相应的单元格，从而增强导出功能，使Excel的格式同Table的格式完全匹配。附录1给出了一个导出简单Table到Excel的例子，这里的Table有跨行和跨列的TD存在，导出结果同HTML的Table完全一样，这是比较简单的Table，TD在跨行时只能在第一列，否则将不能正确导出。大家可以改造一下导出的算法，让它可以适应复杂的表格导出，不过比较困难。

    7. IE的安全问题
由于IE在创建ActiveX控件时可能会产生安全问题，因此IE的安全设置中该项的默认值是禁止创建ActiveX控件的，为了在使用时能够正确的完成功能，只需在IE的安全设置中创建ActiveX控件的选项设置为启用或提示即可。具体设置如下图：

 

View Code

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title >无标题页 </ title >
     < script  type ="text/javascript"  language ="javascript" >
     function  PrintTableToExcel(objTab)
{
   try  
  {
     var  xls  =   new  ActiveXObject(  " Excel.Application "  );
  }
   catch (e) 
  {
  alert(e)
     // alert( "要打印该表，您必须安装Excel电子表格软件，同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。 请点击【帮助】了解浏览器设置方法！");
     return   false ;
  }
  xls.visible  =   true ;
   var  xlBook  =  xls.Workbooks.Add;
   var  xlsheet  =  xlBook.Worksheets( 1 );
   var  x  =   1 ;
   var  y  =   1 ;
   for  ( var  i  =   0 ; i  <  objTab.rows.length; i ++ )
  {
    y  =   1 ;
     for  ( var  j  =   0 ; j  <  objTab.rows[i].cells.length; j ++ )
    {
      xlsheet.Cells(x, y).Value  =  objTab.rows[i].cells[j].innerHTML;
      xlsheet.Cells(x, y).Borders.LineStyle  =   1 ;
      y ++ ;
    }
    x ++ ;
  }
  xlsheet.Columns.AutoFit;  // 自动适应大小
   return ;
}

 

     </ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < table  id ="Table1"  cellpadding ="0"  cellspacing ="0"  style ="width:90%" >
             < tr >
                 < td >
                    姓名 </ td >
                 < td >
                    学号 </ td >
                 < td >
                    语文 </ td >
                 < td >
                    数学 </ td >
             </ tr >
             < tr >
                 < td >
                    张三 </ td >
                 < td >
                    200118056 </ td >
                 < td >
                    78 </ td >
                 < td >
                    95 </ td >
             </ tr >
             < tr >
                 < td >
                    李四 </ td >
                 < td >
                    201118057 </ td >
                 < td >
                    89 </ td >
                 < td >
                    37 </ td >
             </ tr >
             < tr >
                 < td >
                    王五 </ td >
                 < td >
                    201118058 </ td >
                 < td >
                    92 </ td >
                 < td >
                    88 </ td >
             </ tr >
         </ table >
         < input  id ="Submit1"  type ="submit"  value ="submit"  onclick ="PrintTableToExcel(Table1)"   />
     </ div >
     </ form >
</ body >
</ html >