之前也接触过使用POI导入导出excel表,今天就试试了tableExport.js导出excel表,还很好上手。
废话不多说,直接上码。
前端页面需要准备的材料:
常用的bootstrap css 和 js,这里需要导入tableExport.js针对excel导入导出的![
![](https://img-blog.csdnimg.cn/20181105121200787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ5NDkwOA==,size_16,color_FFFFFF,t_70)
网上搜一下相关的包,或者去官网下一个自己搜一下
<link rel="stylesheet" type="text/css" href="${path}/cs/bootstrap-table.min.css"/>
<link rel="stylesheet" type="text/css" href="${path}/cs/bootstrap.min.css"/>
<script type="text/javascript" src="${path}/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${path}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${path}/js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="${path}/js/tableExport.js"></script>
<script type="text/javascript" src="${path}/js/bootstrap-table-zh-CN.js"></script>
常规操作:弄一个button 数据导出
<button type="button" class="btn btn c-theme-btn" id="btn_download">数据导出</button>
常规操作:定义一个点击事件
$('body').on('click','#btn_download',function(){//添加按钮点击事件
$('#table_page').tableExport( { type: 'excel', escape: 'false' , fileName: name + '工资表导出数据' });
});
需要注意的是:1.该工具只能到当前页面显示的,如果页面有折叠,显示隐藏项的列就只能导出你操作后的结果(可能我用的还不是很熟练),2.如果搜索很多条,它也只导出当前页的信息,所有有必要修改下一个页面需要展示多少条(pageList)。
pageNumber: 1, //如果设置了分页,首页页码
pageSize: 10, //每页的记录行数(*)
pageList: [10,20,50,100], //可供选择的每页的行数(*)