利用js快速将页面中的table导出至Excel

在数据导入导出时,经常需要将数据导出至Excel编辑,下面介绍一种快速导出页面table标签数据到Excel的方法。

  先看看效果。

 

Line Charge Change Summary

Line Charge Change Summary

Search for a period of time, the change of setup charge, monthly charge and working days.
Modify Date:
From   To  

ID City Provider Inner/Outer LL Type Bandwidth NRC (Old) NRC (New) MRC (Old) MRC (New) Leadtime
(Old)
Leadtime
(New)
Last Update Time
1383 湖南 电信/网通 区间 FR/Eth 2M 2000 2000 1500 1500 40 40 2014-01-14 17:56:24
1514 湖南 CU 区内 STM-1 4M 3000 3000 2666 2666 40 40 2014-01-14 17:56:24
1515 湖南 CU 区内 STM-1 6M 3000 3000 3734 3734 40 40 2014-01-14 17:56:25
1516 湖南 CU 区内 STM-1 8M 3000 3000 4800 4800 40 40 2014-01-14 17:56:26
1517 湖南 CU 区内 STM-1 10M 3000 3000 5415 5415 40 40 2014-01-14 17:56:27
1518 湖南 CU 区内 STM-1 20M 3000 3000 8492 8492 40 40 2014-01-14 17:56:28
1519 湖南 CU 区内 STM-1 30M 3000 3000 11570 11570 40 40 2014-01-14 17:56:29

下面展示源码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Line Charge Change Summary</title>
<script src="../jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script src="../jquery/ui/jquery-ui.js" type="text/javascript"></script>
<link href="../jquery/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 .date_picker { width:90px;}
 table tr{ background-color:#FFFFFF}
 .claimlist_table{border-collapse: collapse;border:1px solid #cad9ea;  text-align:center;}
 .claimlist_table_tr{background-color: #D0D0D0; height:15px;font-weight: bold;}
</style>

<script type="text/javascript">
    $(function() {
        $(".date_picker").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy/mm/dd"
        });
    });

    function searchChange() {
        $("#form1").submit();
    }

    function ExportExcel(tableid) //读取表格中每个单元到EXCEL中 
    {
        var curTbl = document.getElementById(tableid);
        //var oXL = new ActiveXObject("Excel.Application"); 

        try {
            oXL = GetObject("", "Excel.Application");
        } catch (E) {
            try {
                oXL = new ActiveXObject("Excel.Application");
            } catch (E2) {
                alert("请确认:\n1.您使用的是IE浏览器.\n2.安装Microsoft Excel.\n3.设置浏览器安全级别:Internet 选项=>安全=>本地=>自定义级别: \n \"对未标记为可安全执行脚本的 ActiveX 控件初始化并执行脚本\" =>提示");
                return;
            }
        }

        //创建AX对象excel 
        var oWB = oXL.Workbooks.Add();
        //获取workbook对象 
        var oSheet = oWB.ActiveSheet;
        //激活当前sheet 
        var Lenr = curTbl.rows.length;
        //取得表格行数 

        for (i = 0; i < Lenr; i++) {
            var Lenc = curTbl.rows(i).cells.length;
            //取得每行的列数 

            for (j = 0; j < Lenc; j++) {
                oSheet.Cells(i + 1, j + 1).value = curTbl.rows(i).cells(j).innerText;
                //赋值 
            }
        }

//定义行高
        oSheet.Rows(1 + ":" + 1).RowHeight = 30;   
        //定义列宽
        oSheet.Columns(‘C:C‘).ColumnWidth = 12;
        oSheet.Columns(‘D:D‘).ColumnWidth = 12;
        oSheet.Columns(‘F:F‘).ColumnWidth = 12;
        oSheet.Columns(‘M:M‘).ColumnWidth = 15;
oXL.Visible
= true; //设置excel可见属性 oSheet.Application.Quit(); // 结束当前进程 window.opener = null; } </script> </head> <body> <form action="./line_charge_change_summary.asp" id="form1" name="form1" method="post" > <h3>Line Charge Change Summary</h3> <fieldset> <legend>Search for a period of time, the change of setup charge, monthly charge and working days.</legend><br /> <table> <tr><td>Modify Date:</td></tr> <tr><td>From <input type="text" class="date_picker" id="date_from" name="date_from" readonly="readonly" value="2014/01/10" /></td> <td>&nbsp;&nbsp;To <input type="text" class="date_picker" id="date_to" name="date_to" readonly="readonly" value="2014/01/14" /></td> <td style="width:100px"></td> <td><input type="button" value="Search" onclick="searchChange();" /></td> <td><input type="button" value="Export to Excel" style="text-align:right" onclick="ExportExcel(‘ld_city_summary‘)" /></td> </tr> </table><br /> <table id="ld_city_summary" class="" style="text-align:center;background-color:#2C6193; width:1200px;" border="0" cellspacing="1" cellpadding="0"> <tr class="claimlist_table_tr" style=" height:30px;"> <td>ID</td> <td>City</td> <td>Provider</td> <td>Inner/Outer</td> <td>LL Type</td> <td>Bandwidth</td> <td>NRC (Old)</td> <td>NRC (New)</td> <td>MRC (Old)</td> <td>MRC (New)</td> <td>Leadtime<br />(Old)</td> <td>Leadtime<br />(New)</td> <td>Last Update Time</td></tr> <tr> <td>1383</td> <td>湖南</td> <td>电信/网通</td> <td>区间</td> <td>FR/Eth</td> <td>2M</td> <td>2000</td> <td>2000</td> <td>1500</td> <td>1500</td> <td>40</td> <td>40</td> <td>2014-01-14 17:56:24</td> </tr> <tr> <td>1514</td> <td>湖南</td> <td>CU</td> <td>区内</td> <td>STM-1</td> <td>4M</td> <td>3000</td> <td>3000</td> <td>2666</td> <td>2666</td> <td>40</td> <td>40</td> <td>2014-01-14 17:56:24</td> </tr> <tr> <td>1515</td> <td>湖南</td> <td>CU</td> <td>区内</td> <td>STM-1</td> <td>6M</td> <td>3000</td> <td>3000</td> <td>3734</td> <td>3734</td> <td>40</td> <td>40</td> <td>2014-01-14 17:56:25</td> </tr> <tr> <td>1516</td> <td>湖南</td> <td>CU</td> <td>区内</td> <td>STM-1</td> <td>8M</td> <td>3000</td> <td>3000</td> <td>4800</td> <td>4800</td> <td>40</td> <td>40</td> <td>2014-01-14 17:56:26</td> </tr> <tr> <td>1517</td> <td>湖南</td> <td>CU</td> <td>区内</td> <td>STM-1</td> <td>10M</td> <td>3000</td> <td>3000</td> <td>5415</td> <td>5415</td> <td>40</td> <td>40</td> <td>2014-01-14 17:56:27</td> </tr> <tr> <td>1518</td> <td>湖南</td> <td>CU</td> <td>区内</td> <td>STM-1</td> <td>20M</td> <td>3000</td> <td>3000</td> <td>8492</td> <td>8492</td> <td>40</td> <td>40</td> <td>2014-01-14 17:56:28</td> </tr> <tr> <td>1519</td> <td>湖南</td> <td>CU</td> <td>区内</td> <td>STM-1</td> <td>30M</td> <td>3000</td> <td>3000</td> <td>11570</td> <td>11570</td> <td>40</td> <td>40</td> <td>2014-01-14 17:56:29</td> </tr> </table> <input type="hidden" id="hd_action" name="hd_action" value="search" /> </fieldset> </form> </body> </html>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。