Bootstrap Table导出
bootstrap table 导出插件及相关参数设置
demo地址：https://download.csdn.net/download/pushen3584/19001112
参考地址：https://github.com/hhurz/tableExport.jquery.plugin#options
一、需引入的相关js，css
1.bootstrap，bootstrap-table，jquery，font-awesome
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="node_modules/bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="node_modules/bootstrap-table/dist/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap-table/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
可通过 npm 下载：
npm install jquery
npm install bootstrap-table
npm install bootstrap@3
npm install font-awesome
2.tableExport
<script type="text/javascript" src="lib/js-xlsx/xlsx.core.min.js"></script>
<script type="text/javascript" src="lib/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="lib/html2canvas/html2canvas.min.js"></script>
<script type="text/javascript" src="lib/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="lib/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script type="text/javascript" src="lib/es6-promise/es6-promise.auto.min.js"></script>
<script type="text/javascript" src="lib/tableExport.js"></script>
<script type="text/javascript" src="lib/pdfmake/pdfmake.min.js"></script>
<script type="text/javascript" src="lib/pdfmake/vfs_fonts.js"></script>
下载地址：
https://github.com/hhurz/tableExport.jquery.plugin
二、各参数详解
1.buttonsAlign
说明：
- 按钮位置 left right
- 默认为right
配置：
$('#demotable').bootstrapTable('refreshOptions', {
showExport: true, //是否显示导出按钮 true false
buttonsAlign: 'right', //按钮位置 left right
})
2.exportDataType
说明：
- 导出的方式 all全部 selected已选择的 basic当前页
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportDataType: 'basic',
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
}
})
3.exportTypes
说明：
- 导出类型 [‘csv’,‘json’,‘sql’,‘excel’, ‘xlsx’,‘doc’,‘png’,‘pdf’,‘txt’,‘xml’]
- 默认为 [‘json’,‘xml’,‘csv’,‘txt’, ‘sql’,excel’’]
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
})
4.fileName
说明：
- 导出文件名
- 默认为tableExport
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
}
})
5.ignoreColumn
说明：
- 配置导出时哪些列不导出 第一列列号为0
- 默认不忽略
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
ignoreColumn: [0,2], // 导出忽略列
}
})
6.ignoreRow
说明：
- 配置导出时哪些行不导出 第一行行号为0
- 默认不忽略
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
ignoreRow: [1,2], //导出时忽略行
}
})
7.numbers
说明：
- 配置表格中数字导出前后的格式转换
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
numbers: {
html: {
decimalMark: '.', //识别html中数字的小数点
thousandsSeparator: ',' //识别html中犍为分隔符
},
output: {
decimalMark: '.', //导出后将html.decimalMark替换为output.decimalMark
thousandsSeparator: '' //导出后将html.thousandsSeparator.thousandsSeparator
}
},
}
})
8.preserve
说明：
- 配置表格单元格中的空白内容导出时是否保留
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
preserve: {
leadingWS: false, // 保留单元格内容前面的空白部分
trailingWS: false // 保留单元格内容后面的空白部分
},
}
})
9.preventInjection
说明：
- 在以=，+，-或@开头的单元格字符串前加单引号以防止公式注入
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
preventInjection: true,
}
})
10.outputMode
说明：
- ‘file’, ‘string’, ‘base64’ or ‘window’ 使用file可以导出文件，使用其他的也不知道是什么作用~~
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
outputMode: 'file',
}
})
11.htmlHyperlink
说明：
- 导出表格的内容content 导出超链接的地址href
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
htmlHyperlink: 'content', // 导出表格的内容content 导出超链接的地址href
}
})
12.csvUseBOM
说明：
- 具体不知道是什么作用，当这个为false时，导出CVS时表头中文乱码
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
csvUseBOM: true, //当这个为false时，导出时表头中文乱码
}
})
12.csvSeparator
说明：
- CVS设置字段分界符，当为’,'时,table会按照excel单元格分隔
- 当csvSeparator为逗号时，导出的CVS为正常表格
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
csvUseBOM: true, //当这个为false时，导出时表头中文乱码
csvSeparator: ',', //设置字段分界符，当为','时,table会按照excel单元格分隔
}
})
13.csvEnclosure
说明：
- CVS字段环绕符
- 当csvSeparator不为空时，这个属性的设置好像失效
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
csvUseBOM: true, //当这个为false时，导出时表头中文乱码
csvEnclosure:'', //字段环绕符
}
})
14.jsonScope
说明：
- 导出json范围
- head 表头，data 数据，all 表头加数据
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
jsonScope: 'data', // head 表头，data 数据，all 表头加数据
}
})
15.tableName
说明：
- 导出的sql表名
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
//sql
tableName: 'user_order', //sql中的表名
sql: {
tableEnclosure: '`', // 表名字段环绕符
columnEnclosure: '`' // 列名字段环绕符
},
}
})
16.mso
说明：
- fileFormat设置导出格式：xlshtml导出excel为xls格式，xlsx导出的excel为xlsx格式，xmlss导出excel就直接导出了xml
- worksheetName这是excel sheet页名称
- rtl设置excel显示顺序，true则从右到左显示，false则从左到右显示
- pageFormat设置word页面格式
配置：
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
//MS EXCEL or MS WORD
mso: {
fileFormat: 'xlshtml', //文件格式 xlshtml导出excel为xls格式，xlsx导出的excel为xlsx格式，xmlss导出excel就直接导出了xml
worksheetName: 'sheet页名称', //sheet页名称
rtl: false, //DisplayRightToLeft 仅对xls生效，true则从右到左显示，false则从左到右显示
pageFormat: 'a4', //word页面格式
onMsoNumberFormat: null,
},
}
})
17.jspdf
说明：
- 设置pdf导出的相关格式
$('#table').bootstrapTable('refreshOptions', {
showExport: true,
exportTypes: ['csv','json','sql','excel', 'xlsx','doc','png','pdf','txt','xml'],
exportOptions: { //导出配置
fileName: '数据导出文件', //导出文件名
jspdf: {
orientation: 'p', //横向 l 纵向 p
unit: 'pt', //表格与页面间距单位
format: 'a4', //pdf页面格式
margins: {left: 20, right: 10, top: 10, bottom: 100}, //表格与页面间距
onDocCreated: onDocCreated, //在pdf创建时调用函数
autotable: {
styles: { //数据样式
cellPadding: 2, //列边距
rowHeight: 10, //行高
fontSize: 10, //字体大小
fillColor: [255,255,255], //背景填充颜色
textColor: 40, //字体颜色
fontStyle: 'normal', //字体样式 'normal', 'bold', 'italic', 'bolditalic' or 'inherit' to use css font-weight and font-style from html table
overflow: 'ellipsize', // 超出后如何显示 可见'visible', 隐藏'hidden', 省略号'ellipsize' 换行符 'linebreak'
halign: 'inherit', // 水平对齐 'left', 'center', 'right' or 'inherit' to use css horizontal cell alignment from html table
valign: 'middle' // 垂直对齐 'top', 'middle', or 'bottom'
},
headerStyles: { //表头样式
fillColor: [52, 73, 94],
textColor: 255,
fontStyle: 'bold',
halign: 'inherit', // 'left', 'center', 'right' or 'inherit' to use css horizontal header cell alignment from html table
valign: 'middle' // 'top', 'middle', or 'bottom'
},
alternateRowStyles: {
fillColor: [0,255,255] //行交替颜色
}
},
},
}
})
18.一些函数调用
调用顺序：
onTableExportBegin > onIgnoreRow >onCellHtmlData> onCellData > onCellHtmlHyperlink> onBeforeSaveToFile > onAfterSaveToFile > onTableExportEnd
onAfterSaveToFile
function onAfterSaveToFile(data, fileName) {
console.log("doAfterSaveToFile-----------start");
//console.log("data:" + data );
//console.log("fileName="+fileName);
//console.log("doAfterSaveToFile-----------end");
}
onBeforeSaveToFile
/**
* doBeforeSaveToFile
* param:
* data 数据
* fileName 文件名
* type
* charset
* encoding
* return:
* true or false: 返回false则不进行导出
*/
function onBeforeSaveToFile(data, fileName, type, charset, encoding) {
console.log("doBeforeSaveToFile-----------start");
//console.log("data:" + data );
//console.log("fileName="+fileName);
//console.log("type="+type);
//console.log("charset="+charset);
//console.log("encoding="+encoding);
//console.log("doBeforeSaveToFile-----------end");
return true;
}
onCellData
/**
* doCellData
* param:
* cell 列
* row 行号
* col 列号
* cellText 字段内容
* cellType 字段格式
* return:
* cellText: 返回每个单元格要导出的数据
*/
function onCellData(cell, row, col, cellText, cellType) {
console.log("doCellData-----------start");
//console.log("cell:" + cell);
//console.log("row:" + row);
//console.log("col:" + col);
//console.log("cellText:" + cellText);
//console.log("cellType:" + cellType);
//console.log("doCellData-----------end");
return cellText;
}
onCellHtmlData
/**
* doCellHtmlData
* param:
* cell 列
* row 行号
* col 列号
* htmlContent 内容
* return:
* htmlContent: 返回每个单元格要导出的数据
*/
function onCellHtmlData(cell, row, col, htmlContent) {
console.log("doCellHtmlData-----------start");
//console.log("cell:" + cell);
//console.log("row:" + row);
//console.log("col:" + col);
//console.log("htmlContent:" + htmlContent);
//console.log("doCellHtmlData-----------end");
return htmlContent;
}
onCellHtmlHyperlink
/**
* doCellHtmlHyperlink
* 导出超链接时执行
* 表格中有超链接并且onCellHtmlData为null时生效
* param:
* cell 列
* rowIndex 行号
* colIndex 列号
* href 超链接地址
* htmlData html内容
* return:
* htmlData: 返回每个单元格要导出的数据
*/
function onCellHtmlHyperlink(cell, rowIndex, colIndex, href, htmlData){
console.log("doCellHtmlHyperlink-----------start");
//console.log("cell:" + cell);
//console.log("row:" + rowIndex);
//console.log("col:" + colIndex);
//console.log("href:" + href);
//console.log("htmlData:" + htmlData);
//console.log("doCellHtmlHyperlink-----------end");
return htmlData;
}
onTableExportBegin
function onTableExportBegin(){
console.log("doTableExportBegin-----------start");
}
onTableExportEnd
function onTableExportEnd(){
console.log("doTableExportEnd-----------start");
}
onIgnoreRow
/**
* doIgnoreRow
* 忽略行时执行
* param:
* row 行
* rowIndex 行号
* return:
* true or false: 返回true则忽略该行
*/
function onIgnoreRow(row, rowIndex) {
console.log("doIgnoreRow-----------start");
//console.log("row:" + row);
//console.log("rowIndex:" + rowIndex);
//console.log("doIgnoreRow-----------end");
return false;
}
三、存在问题
1.导出数字时默认是科学计数法
https://blog.csdn.net/fan510988896/article/details/54410230
扫一扫
3132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
