zoukankan      html  css  js  c++  java
  • 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="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>
     
  • 相关阅读:
    python imageai 对象检测、对象识别
    flask跨域请求三行代码搞定
    图片压缩-KMeans
    电影天堂
    python 时间操作
    时间HTML
    3D滚动效果
    tensorflow基础
    studio显示Surface: getSlotFromBufferLocked: unknown buffer: 0xa2a58be0
    解决github访问慢和clone慢解决方案
  • 原文地址:https://www.cnblogs.com/qqflying/p/2409484.html
Copyright © 2011-2022 走看看