版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012796085/article/details/79819508
最近最报表某些需求只导出本页面数据，于是就尝试了一下前端导出，使用的bootstrap Table导出，顺便学习了一下bootstrap Table,最终效果图如下
测试项目使用springbot+mybatis+templeaf,\
bootstrap官网有示例代码，提供的json数据源，懒得写后台的同志可以直接使用json数据文件做测试前端导出功能。
bootstrap-table-export.min.js
bootstrap-table.js
<link href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link href="../../static/css/font-awesome.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css" th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js" th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js" th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-export.min.js" th:src="@{/js/plugins/bootstrap-table/bootstrap-table-export.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/tableExport.min.js" th:src="@{/js/plugins/bootstrap-table/tableExport.min.js}"></script>页面dom,工具栏和springbootTable按钮是两个东西，\
工具栏需要手写，即使没数据也会显示，按钮和分页是首次加载数据网格动态加载出来的
<div class="container-fluid">
<div class="ibox-content padding-s-0">
<div class="ibox float-e-margins">
<div class="example">
<div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
<button type="button" class="btn btn-outline btn-default">
<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-outline btn-default">
<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-outline btn-default">
<i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
</button>
</div>
<table id="exampleTableEvents" data-mobile-responsive="true"></table>
</div>
</div>
</div>
</div>数据加载,关于数据网格的各种属性和事件，还是去看官方文档比较好，默认的就没写，需要改动的列出来并都有注释
$(function() {
$('#exampleTableEvents').bootstrapTable({
//url: "/js/demo/bootstrap_table_test.json",
url: "/user/all", //数据源
height: 790, //表格高度
search: true, //是否显示搜索框
searchAlign: "left", //指定搜索框水平方向位置
trimOnSearch: true, //搜索内容是否自动去除前后空格
searchOnEnterKey: true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
icons: {refresh: "glyphicon-repeat", toggle: "glyphicon-list-alt", columns: "glyphicon-list",export: 'glyphicon-export'},
showExport: true, //是否显示导出按钮
exportTypes:['csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'], //导出文件类型
exportDataType: "basic", //basic当前页', 'all所有, 'selected'.
exportOptions: {
ignoreColumn: [0,1], //忽略某一列的索引
fileName: '用户信息报表', //文件名称设置
worksheetName: 'sheet1', //表格工作区名称
tableName: '用户信息报表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight']
},
queryParams :queryParams, //查询函数
pagination: true, //显示分页栏
showRefresh: true, //显示刷新按钮
showColumns: true, //是否显示内容列下拉框
striped: true, //设置为 true 会有隔行变色效果
sortName: "user_id", //定义排序字段
sortOrder: "desc", //定义排序方式，'asc' 或者 'desc'
silentSort: false, //设置为 false 将在点击分页按钮时，自动记住排序项
maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
toolbar: '#exampleTableEventsToolbar', //工具栏id
sidePagination: "server", //设置在哪里进行分页，可选值为 'client' 或者 'server'，默认'client'
pageNumber: 1, //如果设置了分页，首页页码
pageSize: 20, //每页每页显示行数
pageList: [20, 50, 100, 200,'All'], //设置可供选择的页面数据条数,如果数据量大于50小于100，则只会显示20，50，100三项
showFullscreen: true, //是否显示全屏按钮
responseHandler: function(data) { //如果后台返回的数据格式与bootstrapTable的数据格式不同在这里调整
return {
"page": data.pages,
"total": data.total,
"rows": data.list
};
},
columns: [
{field: 'checkStatus',checkbox: true}, //给多选框赋一个field值为“checkStatus”用于更改选择状
{field:'userId',title:'用户编号'},
{field:'userName',title:'名称'},
{field:'phone',title:'电话'},
{field:'email',title:'邮箱' },
{field:'sex',title:'性别',formatter:function(value,row,index){if(value) return '男'; else return '女';}},
{field:'birthday',title:'生日'},
{field:'qqpid',title:'qq标识'},
{field:'wxpid',title:'微信'},
{field:'statu',title:'状态',formatter:function(value,row,index){if(value) return '正常'; else return '冻结';}}
]
});
});
//自定义查询提交内容，用于复杂查询条件时
function queryParams(params) {
// 默认值params ： {search: "", sort: undefined, order: undefined, limit: 10, offset: 0} ，可通过上面的配置修改
/**var temp = { //这里的键的名字和控制器的变量名必须一致
limit: params.limit,
offset: params.offset,
pageSize:this.pageSize,
pageNumber:this.pageNumber,
username: $("#userinputid").val();
};*/
return params;
}控制层，使用了PageHelper分页插件，在控制层或者service层设置页码和每页行数即可，省去了先查总数量再查数据的麻烦
@ResponseBody
@RequestMapping(value = "/all", produces = {"application/json;charset=UTF-8"})
public PageInfo findAllUser(HttpServletRequest request){
ResponseData res = new ResponseData();
HashMap<String,Object> queryparm = new HashMap<String,Object>();
int limit = Integer.parseInt(request.getParameter("limit"));
int offset = Integer.parseInt(request.getParameter("offset"));
String searchText = request.getParameter("search");
if(!"".equals(searchText)&&searchText!=null){
queryparm.put("searchText","%"+searchText+"%");
}
String sort = request.getParameter("sort");
String order = request.getParameter("order");
queryparm.put("sort",sort);
queryparm.put("order",order);
PageHelper.offsetPage(offset,limit);
List<User> users = userService.findAllUser(queryparm);
PageInfo pageInfo=new PageInfo(users);
return pageInfo;
}附上PageHelper的pom引用
<!-- 分页插件 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.1.2</version>
</dependency>如果js报错就升级bootstrap版本，另外设置导出所有并没有去查数据库，只能导出当前页面数据，所以实际都是先设置当前页行数选择All，列出所有再导出，如果数据量大，还得分页多次导出或者从后台导出，导出数据都是经过前端表格formatter转义的，大数据一次导出可能会增加浏览器处理时间