js导出excel页面数据

很多时候一些工具平台需要开发报表,以便于直观的展示数据成果。报表还需要有导出等功能,后台servlet导出用惯了。有没有简单的根据html页面的table导出??

hiahiahia,被我找到了(excel打开时会有个提示,无需理会。直接选“是”即可。否则可能会无数据)。

首先来创建js文件:

export-excel.js

(function ($) {
     Date.prototype.Format = function (fmt) {
       var o = {
          "M+": this.getMonth() + 1, //月份 
          "d+": this.getDate(), //
          "h+": this.getHours(), //小时 
          "m+": this.getMinutes(), //
          "s+": this.getSeconds(), //
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
          "S": this.getMilliseconds() //毫秒 
       };
       if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
       for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
       return fmt;
    }        
 
    $.fn.ExportExcel = function (thread_id,tab_id, options) {
       var defaults = {
          height: '24px',
          'line-height': '24px',
          margin: '0 5px',
          padding: '0 11px',
          color: '#000',
          background: '#02bafa',
          border: '1px #26bbdb solid',
          'border-radius': '3px',
          /*color: #fff;*/
          display: 'inline-block',
          'text-decoration': 'none',
          'font-size': '12px',
          outline: 'none',
          cursor: 'pointer'
       }
       var options = $.extend(defaults, options);
       return this.each(function () {
          var currentObject = $(this); //获取当前对象 
          currentObject.css(defaults);
          currentObject.onmouseover = function () {
             $(this).css('cursor', 'hand');
          };
 
          currentObject.click(function () {
             //From:jsfiddle.net/h42y4ke2/16/
             var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
             tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';
 
             tab_text = tab_text + '<x:Name>Test Sheet</x:Name>';
 
             tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
             tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
 
             tab_text = tab_text + "<table border='1px'>";
             tab_text = tab_text + $('#' + thread_id).html();
             tab_text = tab_text + $('#' + tab_id).html();
             tab_text = tab_text + '</table></body></html>';
 
             var data_type = 'data:application/vnd.ms-excel';
 
             var timeStr = new Date().Format('yyyyMMddhhmmss');
             $(this).attr('href', data_type + ', ' + encodeURIComponent(tab_text));
             $(this).attr('download', '日常数据报表' + timeStr + '.xls');
          });
       })
    }
 })(jQuery);

html页面:

<html>

  <a href="#" id="export">导出</a>

  <table>

    <thead id="theadDate">

      <tr>

        <th>姓名</th>

        <th>班级</th>

        <th>年龄</th>

      </tr>

    </thead>

  <tbody id="tbodyDate">

  <tr>

           <td>张三</td>

        <td>高二</td>

        <td>18</td>

  </tr>

  <tr>

        <td>李四</td>

        <td>高三</td>

        <td>20</td>

  </tr>

  </tbody>

</table>

<script src="assets/javascripts/autotest/export-excel.js"  ></script>  <!-- 引入js文件-->

<script type="text/javascript">

//导出 调用
$(function () {
  $('#export').ExportExcel('theadDate','tbodyDate'); //tbodyDate为table的id,export为a标签。
});

</script>

</html>
原文地址:https://www.cnblogs.com/haohao111/p/7064684.html