<table>导出excal

<table>导出excal

 将<table>导出为excal文件,这里介绍两种方法。

1.直接写代码,拼接出excal文件的字符串,然后直接用a标签下载。本人没有是试过,在此粘下代码留念。

<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
    function base64 (content) {
       return window.btoa(unescape(encodeURIComponent(content)));         
    }
    /*
    *@tableId: table的Id
    *@fileName: 要生成excel文件的名字(不包括后缀,可随意填写)
    */
    function tableToExcel(tableID,fileName){
        var table = document.getElementById(tableID);
      var excelContent = table.innerHTML;
      var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
      excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
      excelFile += "<body><table>";
      excelFile += excelContent;
      excelFile += "</table></body>";
      excelFile += "</html>";
      var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);
      var a = document.createElement("a");
      a.download = fileName+".xlsx";
      a.href = link;
      a.click();
    }
</script>
</head>
<body>
<button type="button" onclick="tableToExcel('item','data')">导出</button>
<table id="item">
  <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>1</td>
    <td>小明</td>
    <td>19</td>
  </tr>
  <tr>
    <td>2</td>
    <td>小芳</td>
    <td>20</td>
  </tr>
  <tr>
    <td>3</td>
    <td>大军</td>
    <td>22</td>
  </tr>
</table>
</body>
</html>
View Code

2.用jquery的插件:jquery.table2excel.js

这个就更简单了,只有5个配置项。

$('button').click(function(){              //下载按钮
        $("#datatable").table2excel({         //table标签id
            exclude: ".noExl",
            name: "Excel Document Name",
            filename: "myFileName",
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });
    })
//      table2excel插件的可用配置参数有:
//
// exclude:不被导出的表格行的CSS class类。
// name:导出的Excel文档的名称。
// filename:Excel文件的名称。
// exclude_img:是否导出图片。
// exclude_links:是否导出超链接
// exclude_inputs:是否导出输入框中的内容。

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="datatable" class="xd_table_sj">

    <tbody>
    <tr>
        <td><div align="center" id="titlelable">起始时间</div></td>
        <td><div align="center" id="titlelable">通信地点</div></td>
        <td><div align="center" id="titlelable">上网方式</div></td>
        <td><div align="center" id="titlelable">总时长</div></td>
        <td><div align="center" id="titlelable">总流量</div></td>
        <td><div align="center" id="titlelable">套餐优惠</div></td>
        <td><div align="center" id="titlelable">优惠或减免</div></td>
        <td><div align="center" id="titlelable">通信费</div></td>
        <td><div align="center" id="titlelable">终端类型</div></td>
    </tr>


    <tr bgcolor="#EFFEDD" onmouseover="this.style.background='#D2FCA0'" onmouseout="this.style.background='#EFFEDD'" style="background: rgb(239, 254, 221);">
        <td>10-01 01:57:05</td>
        <td></td>
        <td>CMNET</td>
        <td>0秒</td>
        <td>0.001</td>
        <td>校园4G套餐-400M国内流量</td>
        <td></td>
        <td>0.00</td>
        <td></td>
    </tr>


    </tbody>
</table>
<button>导出EXCEL</button>

    <script src="js/jquery.js"></script>

<script src="js/jquery.table2excel.js"></script>
<script>
    $('button').click(function(){
        console.log(1)
        $("#datatable").table2excel({
            exclude: ".noExl",
            name: "Excel Document Name",
            filename: "myFileName",
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });
    })


    //      table2excel插件的可用配置参数有:
    //
    //            exclude:不被导出的表格行的CSS class类。
    //            name:导出的Excel文档的名称。
    //            filename:Excel文件的名称。
    //            exclude_img:是否导出图片。
    //            exclude_links:是否导出超链接
    //            exclude_inputs:是否导出输入框中的内容。

</script>
</body>
</html>
View Code

 

 

参考链接:https://blog.csdn.net/jesslu/article/details/77866040

posted @ 2018-12-06 09:34  莫小龙  阅读(300)  评论(0编辑  收藏  举报