關(guān)于BootstrapTable 導(dǎo)出數(shù)據(jù)的問題最終解決方案
更新時(shí)間：2022年03月29日 16:14:23 作者：江湖小小白
這篇文章主要介紹了BootstrapTable 導(dǎo)出數(shù)據(jù)的問題，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
要導(dǎo)出的數(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>
<!--在客戶端保存生成的導(dǎo)出文件-->
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<!--以XLSX（Excel 2007+ XML格式）格式導(dǎo)出表（SheetJS）-->
<script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script>
<!--以PNG格式導(dǎo)出表格-->
<!--對(duì)于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>
<!--將表導(dǎo)出為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'>導(dǎo)出</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,//工具欄上顯示導(dǎo)出按鈕
exportDataType: $(this).val(),//顯示導(dǎo)出范圍
exportTypes: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],//導(dǎo)出格式
exportOptions: {//導(dǎo)出設(shè)置
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');
}
});
})
// 自定義按鈕導(dǎo)出數(shù)據(jù)
function exportData(){
$('#table').tableExport({
type: 'excel',
exportDataType: "all",
ignoreColumn: [0],//忽略某一列的索引
fileName: 'Tablexxx',//下載文件名稱
onCellHtmlData: function (cell, row, col, data){//處理導(dǎo)出內(nèi)容,自定義某一行、某一列、某個(gè)單元格的內(nèi)容
console.info(data);
return data;
},
});
}
</script>
</body>
</html>
結(jié)果
bootstrap-table-export：https://bootstrap-table.com/docs/extensions/export/
tableexport.jquery.plugin CDN：https://unpkg.com/tableexport.jquery.plugin/
到此這篇關(guān)于BootstrapTable 導(dǎo)出數(shù)據(jù)的文章就介紹到這了,更多相關(guān)BootstrapTable 導(dǎo)出數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript中的this應(yīng)用非常廣泛，對(duì)js中this總是似是而非的感覺，今天小編豁然開朗，然后再次給大家談?wù)搄s中的this關(guān)鍵，感興趣的朋友跟著小編一起看看吧2016-06-06
JS寫XSS cookie stealer來竊取密碼的步驟詳解
JavaScript是web中最常用的腳本開發(fā)語言，js可以自動(dòng)執(zhí)行站點(diǎn)組件，管理站點(diǎn)內(nèi)容，在web業(yè)內(nèi)實(shí)現(xiàn)其他有用的函數(shù)。這篇文章主要介紹了JS寫XSS cookie stealer來竊取密碼的步驟詳解,需要的朋友可以參考下2017-11-11
微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)密碼顯示與隱藏的睜眼閉眼功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
JavaScript數(shù)組去重實(shí)現(xiàn)方法小結(jié)
這篇文章主要介紹了JavaScript數(shù)組去重實(shí)現(xiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組去重ES3、ES5及ES6常見實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
這篇文章主要介紹了uni-app如何實(shí)現(xiàn)增量更新功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
javascript控制圖片播放的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript控制圖片播放的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
了解最新的框架，提升我們的開發(fā)效率。2009-03-03
這篇文章主要介紹了微信小程序視圖控件與bindtap之間的問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JS控制FileUpload的上傳文件類型實(shí)例代碼
下面小編就為大家?guī)硪黄狫S控制FileUpload的上傳文件類型實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
javaScript實(shí)現(xiàn)網(wǎng)頁版的彈球游戲
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)網(wǎng)頁版的彈球游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07