JQuery DataTables 匯出 Excel(檔案匯出,列印功能)
JQuery DataTables 的Button框架(擴充套件)中 內建按鈕 為 JQuery DataTables 提供了 檔案匯出,列印,列可見性功能。
本篇博文,就以我們常用的 檔案匯出 功能為例,介紹一下 內建按鈕功能。
檔案匯出
下面給出了官網對檔案匯出功能的翻譯, 如果大家不想讀,我就簡單給大家總結一下:
- 檔案匯出,框架提供了兩種實現方式: 1. HTMT5 2. FLASH ;
- H5 可以適應現代瀏覽器,而FLASH 則可相容老版本瀏覽器,但是要依賴於FLASH外掛, 厲害的來了, 框架可以自動 檢測瀏覽器能力,幫我們選擇適合的匯出方式。(這是很棒的)
- 引入檔案匯出需要的JS後,我們可以使用四種擴充套件 ,分別是: copy, csv, excel, pdf
在DataTable中顯示資料時,終端使用者通常可以使用這些資料來獲取DataTable中的資料,並將其提取到檔案中以供本地使用。這可以使用基於HTML5的按鈕或Flash按鈕來完成。
按鈕有 四個內建的按鈕型別,它們將 自動檢測瀏覽器的能力和可用的軟體 - 如果可能的話,它們將自動使用HTML5按鈕,如果沒有滿足要求,則會回落到Flash並最終不顯示
- copy - 複製到剪貼簿
- csv - 儲存到CSV檔案
- excel - 儲存到Excel XLSX檔案
- pdf - 儲存為PDF文件
——————–摘自 官網翻譯
檔案匯出實現
上面已經介紹了理論知識,下面我們介紹一下,具體怎麼實現。
上面已經說到了,外掛不光支援 匯出Excel,並且支援其他形式的匯出
一、引入必要的JS擴充套件
擴充套件功能,並沒有和核心庫放在一起,所以我們要單獨引入。
直接選擇我們要使用的擴充套件,而後打包下載 (*推薦)。https://datatables.net/download/
(這個我們在前面自定義按鈕時,提到過,我推薦大家打包下載。)
如圖勾選如下擴充套件, 而後可選擇,壓縮併合並,提升系統性能。
補充:
官網還提供了其他引入方式
當然大家也可以選擇使用自己的資源,那麼請大家引入以下資源
link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.js"></script>
二、使用Button 按鈕擴充套件功能
//再引入已上資源之後,我們便可以直接使用以下功能了
//參考文件: http://www.datatables.club/extensions/buttons/
//例子1:
$('#myTable').DataTable( {
buttons: [
'copy', 'excel', 'pdf'
]
} );
//例子2: 匯出Excel
$('#myTable').DataTable( {
buttons: [
{
extend: 'excel',//使用 excel擴充套件
text: '匯出本頁',// 顯示文字
exportOptions: {
//自定義匯出選項
//如:可自定義匯出那些列,那些行
//TODO...
}
}
]
} );
三、 補充: 自定義匯出資料
由於預設是將整個表格的資料匯出,這顯然可能不是我們想要的,
比如:我們並不想要匯出 checkbox,操作等列。所有我們可以通過配置,自定義匯出那些資料。
我們已 Excel 擴充套件為例
Execl 擴充套件 有如下可選配置:
我用紅線標出來是列選擇器,也就是我要給大家做的例子,列印指定列。
我們又多種方式控制要選擇的列: 比如索引,列名,類名,節點,JQuery等多種方式去選擇我們要列印的列。
配置例項:
//通過索引直接選擇要列印的多列
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
exportOptions: {
columns: [ 0, 1, 2, 5 ]
}
},
]
} );
//通過Name控制要列印的列
//格式為 [列名]: name
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
exportOptions: {
// 將列印 id 和 title 列
columns: [ 'id:name','title:name']
}
},
]
} );