我们在使用layui自带的导出的情况下会发现数据如果出现中间用字符(,-)等分割开就会出现数据错位,这时候就会想着从新写一个导出方法,所以这时候我们就要获取表头和表数据,但是获取出来的表数据是无序,没办法和表头一一对应,这时候就要从新洗数据,让数据和表头一样对应,从而让导出不错位
一、前端代码:
HTML:
//数据表格table
<table class="layui-hide" id="table-radio4" lay-filter="table-radio4"></table>
<script type="text/html" id="table-radio-toolbarDemoInformation">
<div class="layui-btn-container">
//导出按钮
<button id="report" class="layui-btn layui-btn-normal layui-btn-sm layuiadmin-button-btn" lay-event="filter_report"><i class="layui-icon"></i>Report</button>
</div>
</script>
//表单数据提交
<form style="display:none" name="frmExcel" id="frmExcel" action="" enctype="multipart/form-data" method="post">
//带数据过去
//表头
<input name="dataTitle" id="dataTitle" type="hidden">
//表数据
<input name="data" id="data" type="hidden">
//excel名字
<input name="fileName" id="fileName" type="hidden">
</form>
JS:
//使用layui框架
table.on('toolbar(table-radio4)', function (obj) {
switch (obj.event) {
case 'filter_report':
//动态数据获取
var id = "table-radio4";
//获取表头数据
var data = table.clearCacheKey(table.cache[id]);
var dataTitle = [];
table.eachCols(id, function(ii, item){
if(item.field && item.type == 'normal' && ! item.hide){
//获取表头
dataTitle.push(item.field)
}
});
$("#dataTitle").val(dataTitle); //表头
$("#data").val(JSON.stringify(data)); //表数据
$("#fileName").val("xxxx"); //excel 导出名称
$("#frmExcel").attr("action", '../xxx/report'); //请求地址
$("#frmExcel").submit();
setTimeout(function () {
$.messager.progress('close');
}, 3000);
break;
};
});
二、后端:
Java:
注:如果需要个性化构建Excel样式。请看》》》
/**
* 公共导出excel方法
* @param request
* @param response
* @param dataTitle 表头
* @param data 表数据
* @param fileName 文件名称
* @throws IOException
*/
@PostMapping("report")
public void report(HttpServletRequest request, HttpServletResponse response, String dataTitle, String data,String fileName) throws IOException {
//dataTitle:表头 data:数据 fileName:文件名字
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("application/x-download");
fileName = URLEncoder.encode(fileName+".xlsx", "UTF-8");
//HSSF::."xls"
//XSSF:".xlsx"
response.addHeader("Content-Disposition", "attachment;filename=" + fileName);
XSSFWorkbook workbook = new XSSFWorkbook();
// 创建一个工作表sheet
XSSFSheet sheet = workbook.createSheet();
if(StringUtils.isNotBlank(data) && StringUtils.isNotBlank(dataTitle)){
//数据处理
List<String> title = Arrays.asList(dataTitle.split(","));
JSONObject objects = JSON.parseObject(data);
JSONArray jsonData = listSort(title, objects);
//excel处理
//创建表头
//创建第一行
XSSFRow row = sheet.createRow(0);
// 创建一个单元格
XSSFCell cell = null;
for (int i = 0 ; i < title.size();i++){
cell = row.createCell(i);
XSSFCellStyle cellStyle = workbook.createCellStyle();
cellStyle.setAlignment(HorizontalAlignment.CENTER); // 设置字体居中
// 设置字体
XSSFFont font = workbook.createFont();
font.setFontName("宋体");
font.setFontHeightInPoints((short) 13);
cellStyle.setFont(font);
cell.setCellStyle(cellStyle);
cell.setCellValue(title.get(i));
}
//从第二行开始追加数据
for (int i = 1 ;i <= jsonData.size();i++) {
XSSFRow nextRow = sheet.createRow(i);
JSONObject jsonObject = jsonData.getJSONObject(i-1);
for (int j = 0 ;j < jsonObject.size();j++){
nextRow.createCell(j).setCellValue(jsonObject.getString(title.get(j)));
}
}
try {
OutputStream out = response.getOutputStream();
workbook.write(out);
out.close();
workbook.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
//数据从新过滤
public JSONArray listSort(List<String> title,JSONObject objects){
JSONArray array = new JSONArray();
for (int i = 0 ;i<objects.size(); i++){
JSONObject jsonObject = objects.getJSONObject(String.valueOf(i));
JSONObject obj = new JSONObject(new LinkedHashMap<>());
for (int j = 0 ;j <title.size();j++){
obj.put(title.get(j),jsonObject.getString(title.get(j)));
}
array.add(obj);
}
return array;
}