關于BootstrapTable 導出數(shù)據(jù)的問題最終解決方案
要導出的數(shù)據(jù):https://examples.bootstrap-table.com/json/data1.json?order=asc
使用的插件(注意插件版本依賴):tableExport.jquery.plugin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TableExport</title> <!--jquery--> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> <!--bootstrap--> <link rel="external nofollow" rel="stylesheet"> <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <!--fontawesome--> <script src="https://cdn.bootcss.com/font-awesome/5.8.1/js/all.min.js"></script> <!--bootstrap-table--> <link rel="external nofollow" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script> <!--bootstrap-table-lanuage--> <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script> <!--bootstrap-table-export--> <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script> <!--在客戶端保存生成的導出文件--> <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script> <!--以XLSX(Excel 2007+ XML格式)格式導出表(SheetJS)--> <script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script> <!--以PNG格式導出表格--> <!--對于IE支持包括 html2canvas 之前的 es6-promise--> <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> <!--將表導出為PDF文件--> <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script> <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script> <!--無論期望的格式如何,最后都包含 tableexport.jquery.plugin(不是tableexport)--> <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script> </head> <body> <div class="container"> <div id="toolbar"> <select class="form-control"> <option value="">Export Basic</option> <option value="all">Export All</option> <option value="selected">Export Selected</option> </select> </div> <button type="button" onclick="exportData()" class='btn btn-mini btn-info'>導出</button> <table id="table" data-locale="zh-CN"></table> </div> <script> $(function () { $.ajax({ url: "https://examples.bootstrap-table.com/json/data1.json?order=asc", success: function (result) { // 初始化表格 $('#toolbar').find('select').change(function () { $('#table').bootstrapTable('destroy').bootstrapTable({ data: result, pagination: true,//顯示分頁 clickToSelect: true,//單擊列表選中 toolbar: "#toolbar",//顯示工具欄 showToggle: true,//工具欄上顯示列表模式切換 showExport: true,//工具欄上顯示導出按鈕 exportDataType: $(this).val(),//顯示導出范圍 exportTypes: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],//導出格式 exportOptions: {//導出設置 fileName: 'Tablexxx',//下載文件名稱 }, columns: [ { field: 'state', checkbox: true, visible: $(this).val() === 'selected' }, { field: 'id', title: 'ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' } ] }) }).trigger('change'); } }); }) // 自定義按鈕導出數(shù)據(jù) function exportData(){ $('#table').tableExport({ type: 'excel', exportDataType: "all", ignoreColumn: [0],//忽略某一列的索引 fileName: 'Tablexxx',//下載文件名稱 onCellHtmlData: function (cell, row, col, data){//處理導出內(nèi)容,自定義某一行、某一列、某個單元格的內(nèi)容 console.info(data); return data; }, }); } </script> </body> </html>
結果
bootstrap-table-export:https://bootstrap-table.com/docs/extensions/export/
tableexport.jquery.plugin CDN:https://unpkg.com/tableexport.jquery.plugin/
到此這篇關于BootstrapTable 導出數(shù)據(jù)的文章就介紹到這了,更多相關BootstrapTable 導出數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JS寫XSS cookie stealer來竊取密碼的步驟詳解
JavaScript是web中最常用的腳本開發(fā)語言,js可以自動執(zhí)行站點組件,管理站點內(nèi)容,在web業(yè)內(nèi)實現(xiàn)其他有用的函數(shù)。這篇文章主要介紹了JS寫XSS cookie stealer來竊取密碼的步驟詳解,需要的朋友可以參考下2017-11-11JavaScript數(shù)組去重實現(xiàn)方法小結
這篇文章主要介紹了JavaScript數(shù)組去重實現(xiàn)方法,結合實例形式總結分析了JavaScript數(shù)組去重ES3、ES5及ES6常見實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-01-01javaScript實現(xiàn)網(wǎng)頁版的彈球游戲
這篇文章主要為大家詳細介紹了javaScript實現(xiàn)網(wǎng)頁版的彈球游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-07-07