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代码:
  
Name Position Office Age Start date Salary
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750


   4.运行结果为:JQuery datatables 导出excel扩展_第1张图片

你可能感兴趣的:(JavaWeb)