Bootstrap Table导出

tableExport.jquery.pluginbootstrap table 导出插件及相关参数设置参考地址：https://github.com/hhurz/tableExport.jquery.plugin#options支持导出：CSVDOCJSONPDFPNGSQLTSVTXTXLS (Excel 2000 HTML format)XLSX (Excel 2007 Office Ope

chanccx

829人浏览 · 2021-05-23 17:03:57

chanccx · 2021-05-23 17:03:57 发布

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;
	}