bootstrap实现自定义按钮导出Excel表格

1.bootstrap动态生成需要导出的表格

导包：

<script type="text/javascript" src="${link.contextPath}/js/jquery.min.js"></script>
	
<!-- bootstrap的js包 -->
<script type="text/javascript" src="${link.contextPath}/js/bootstrap-3.3.5/js/bootstrap.min.js"></script>

<!-- bootstrap的表格包-->
<script type="text/javascript" src="${link.contextPath}/js/bootstrap-3.3.5/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="${link.contextPath}/js/bootstrap-3.3.5/js/bootstrap-table-zh-CN.js"></script>

html：

<table id="countTable" class="table table-bordered">
	<caption style="text-align:center;">XXXXX</caption>
	<thead></thead>
	<tbody></tbody>
</table>

初始化操作：

//初始化表格
$("#countTable").bootstrapTable({
	striped: true, 
        columns: [{
    		field: "exceptionDiagnose",
          	title: "异常诊断",
          	align: "center"
        },{
        	field: "routine12LeadCount",
        	title: "常规12导",
        	align: "center"
        },{
        	field: "routine18LeadCount",
        	title: "常规18导",
        	align: "center"
        },{
        	field: "dynamicEcgCount",
        	title: "动态心电",
        	align: "center"
        },{
            field: "allCountsCount",
            title: "总计",
            align: "center"
        }],
        cache: false,  
        formatLoadingMessage: function () {
            return "";
        },
        formatNoMatches: function () {  //没有匹配的结果
            return '无符合条件的记录';
        }
});

加载数据：

asyncPost({
	url: "getExceptionDiagnoseCount.json",
        data: {"startCheckTime":startCheckTime,"endCheckTime":endCheckTime,"options":checkBoxArr},
        async: false,
        dataType : 'json',
        success: function(rst){
        	//为表格动态加载数据
        	$("#countTable").bootstrapTable('load',rst.data);
        	
        }
});

表格图：

2.bootstrap自定义按钮导出表格（重点）

（1）导包：

<!-- bootstrap表格导出初始化-->
<script type="text/javascript" src="${link.contextPath}/js/bootstrap-3.3.5/js/bootstrap-table-export/table-export.js"></script>
<!-- bootstrap表格导出执行-->
<script type="text/javascript" src="${link.contextPath}/js/bootstrap-3.3.5/js/bootstrap-table-export/tableExport.js"></script>
<script type="text/javascript" src="${link.contextPath}/js/bootstrap-3.3.5/js/bootstrap-table-export/jquery.base64.js"></script>
<script type="text/javascript" src="${link.contextPath}/js/bootstrap-3.3.5/js/bootstrap-table-export/main.js"></script>

（2）编辑table-export.js包：

var TableExport = function() {
	"use strict";
	// function to initiate HTML Table Export
	var runTableExportTools = function() {
		$(".export-excel").on("click", function(e) {
			e.preventDefault();
			var exportTable = $(this).data("table");
			var ignoreColumn = $(this).data("ignorecolumn");
			$(exportTable).tableExport({
				type : 'excel',
				escape : 'false',
				ignoreColumn : '[' + ignoreColumn + ']'
			});
		});
	};
	return {
		// main function to initiate template pages
		init : function() {
			runTableExportTools();
			//runDataTable_example2();
		}
	};
}(jQuery);

（3）自定义按钮控件：

<button id="exportBtn" class="export-excel btn btn-default" data-table="#countTable">导出</button>

注意：类名需要为export-excel，要不就修改上面table-export.js文件中获取的控件

（4）注意需要在整个页面加载的时候初始化table-export.js文件中的变量TableExport

TableExport.init();

3.结果

4.js包下载

https://pan.baidu.com/s/1c2yEaWC