zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    临时表空间占用大量空间(新建)
    学习总结
    sql:表关联方式
    11gR2 Clusterware 和 Grid Home
    sql分析常用查询
    通过 SSH 实现 TCP / IP 隧道(端口转发):使用 OpenSSH 可能的 8 种场景
    Fabric部署环境初始化(Centos 7)
    Fabric 学习路线
    代币智能合约(go)
    springboot切面编程范例
  • 原文地址:https://www.cnblogs.com/haohao111/p/7064684.html
Copyright © 2011-2022 走看看