JQuery datatables 导出excel扩展

     之前做的前端网页内容的导出都是参考百度上的链接:http://blog.csdn.net/sinat_15114467/article/details/51098522,原理如下:

纯数据的,使用一个FileSaver.js,如果有浏览器不支持Blob的,还需要引入Blob.js,来做导出。HTML内容的,构造一个base64字符串的路径,跳转地址下载,其实也可以将数据抽出来,用纯数据的方式。但这种导出table表格的数据在IE上测试是无法兼容的,而且在使用的过程中,一旦点击了导出,我的分页会没有用,导致分页没用的原因是因为我使用了固定列,导出excel会导出两层的数据,先删除了div在加上div来避免导出重复的数据。

      所以为了更好的导出excel数据,datatables本身就提供了导出

excel、csv、pdf等格式的功能,参考如下链接:https://datatables.net/extensions/buttons/examples/html5/excelTextBold.html(官方的例子导出excel,
有源码和所需的文件):https://datatables.net/extensions/buttons/examples/initialisation/export.html(导出csv/pdf/copy/打印)
  1.所需的js文件:
 
  //code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js
//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js
//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js
  
   $(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
       "buttons": [
						           {
						               'extend': 'excel',
						               'text': '导出',//定义导出excel按钮的文字
						               'exportOptions': {
						                   'modifier': {
						                       'page': 'current'
						                   }
						               }
						           }
						       ],
    } );
} );




  2.所需的css:
  https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css


  3.html代码:
  
<table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
      </thead>
    </table>


   4.运行结果为:

评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值