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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM