React+后端实现导出Excle表格的功能

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近在做一个基于React+antd前端框架的Excel导出功能，我主要在后端做了处理，这个功能完成后，便总结成一篇技术分享文章，感兴趣的小伙伴可以参考该分享来做导出excle表格功能，以下步骤同样适用于vue框架，或者JSP页面的实现。

在做这类导出文件的功能，其实，在后端进行处理，会更容易些，虽然前端也可以进行处理，但还是建议后端来做，因为很多导出工具类基本都是很好用。

根据以下步骤，可以很容易就实现导出Excel表格数据的功能。

1.导出图标

按钮代码：

2.按钮this.excelToPort的方法：

excelPort = () => {
location.href="/test/export.do"
}

3.建立Excel的Entity类(以下类可以直接复制用，无需做修改):

Excel Bean

package com.test; import lombok.Getter;
import lombok.Setter;
import org.apache.poi.xssf.usermodel.XSSFCellStyle; @Getter
@Setter
public class ExcelBean {
private String headTextName; //列头（标题）名
private String propertyName; //对应字段名
private Integer cols; //合并单元格数
private XSSFCellStyle cellStyle; public ExcelBean(String headTextName, String propertyName, Integer cols) {
super();
this.headTextName = headTextName;
this.propertyName = propertyName;
this.cols = cols;
} }

映射到数据库里的User Bean

package com.bqs.data.dcm.bean; import lombok.Getter;
import lombok.Setter; @Getter
@Setter
public class User {
private String id;
private String name;
private Integer age;
private String sex; }

4.建立Excel的工具类（无需修改可直接复制用）

package com.test; import java.beans.IntrospectionException;
import java.lang.reflect.InvocationTargetException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map; import com.test.ExcelBean;
import org.apache.poi.ss.util.CellRangeAddress;
import org.apache.poi.xssf.usermodel.XSSFCell;
import org.apache.poi.xssf.usermodel.XSSFCellStyle;
import org.apache.poi.xssf.usermodel.XSSFFont;
import org.apache.poi.xssf.usermodel.XSSFRow;
import org.apache.poi.xssf.usermodel.XSSFSheet;
import org.apache.poi.xssf.usermodel.XSSFWorkbook; /**
* @author 朱季谦
* @version
*/
public class ExportUtil { /**
* 导出Excel表
* @param clazz 数据源model类型
* @param objs excel标题以及对应的model字段
* @param map 标题行数以及cell字体样式
* @param sheetName 工作簿名称
* @return
*
*/
public static XSSFWorkbook createExcelFile(
Class<?> clazz,
List<Map<String,Object>> objs,
Map<Integer,List<ExcelBean>> map,
String sheetName) throws IllegalAccessException, IllegalArgumentException, InvocationTargetException, IntrospectionException{
//创建新的工作簿
XSSFWorkbook workbook = new XSSFWorkbook();
//创建工作表
XSSFSheet sheet = workbook.createSheet(sheetName);
//设置excel的字体样式以及标题与内容的创建
createFont(workbook);//字体样式
createTableHeader(sheet,map);//创建标题
createTableRows(sheet,map,objs,clazz);//创建内容
System.out.println(workbook);
return workbook;
}
private static XSSFCellStyle fontStyle;
private static XSSFCellStyle fontStyle2;
private static void createFont(XSSFWorkbook workbook) {
//表头
fontStyle = workbook.createCellStyle();
XSSFFont font1 = workbook.createFont();
font1.setBoldweight(XSSFFont.BOLDWEIGHT_BOLD);
font1.setFontName("黑体");
font1.setFontHeightInPoints((short) 12);//字体大小
fontStyle.setFont(font1);
fontStyle.setBorderBottom(XSSFCellStyle.BORDER_THIN);//下边框
fontStyle.setBorderLeft(XSSFCellStyle.BORDER_THIN);//左边框
fontStyle.setBorderTop(XSSFCellStyle.BORDER_THIN);//右边框
fontStyle.setBorderRight(XSSFCellStyle.BORDER_THIN);//右边框
fontStyle.setAlignment(XSSFCellStyle.ALIGN_CENTER);//居中
//内容
fontStyle2 = workbook.createCellStyle();
XSSFFont font2 = workbook.createFont();
font2.setFontName("宋体");
font2.setFontHeightInPoints((short)10);
fontStyle2.setFont(font2);
fontStyle2.setBorderBottom(XSSFCellStyle.BORDER_THIN);//下边框
fontStyle2.setBorderLeft(XSSFCellStyle.BORDER_THIN);//左边框
fontStyle2.setBorderTop(XSSFCellStyle.BORDER_THIN);//右边框
fontStyle2.setBorderRight(XSSFCellStyle.BORDER_THIN);//右边框
fontStyle2.setAlignment(XSSFCellStyle.ALIGN_CENTER);//居中
} /**
* 根据ExcelMapping 生成列头(多行列头)
* @param sheet 工作簿
* @param map 每行每个单元格对应的列头信息
*/
private static void createTableHeader(
XSSFSheet sheet,
Map<Integer, List<ExcelBean>> map) {
int startIndex = 0;//cell起始位置
int endIndex = 0;//cell终止位置
for(Map.Entry<Integer,List<ExcelBean>> entry: map.entrySet()){
XSSFRow row = sheet.createRow(entry.getKey()); //创建行
List<ExcelBean> excels = entry.getValue();
for(int x=0;x<excels.size();x++){
//合并单元格
if(excels.get(x).getCols()>1){
if(x==0){
endIndex += excels.get(x).getCols()-1;
//合并单元格CellRangeAddress构造参数依次表示起始行，截至行，起始列，截至列
sheet.addMergedRegion(new CellRangeAddress(0, 0, startIndex, endIndex));
startIndex += excels.get(x).getCols();
}else{
endIndex += excels.get(x).getCols();
sheet.addMergedRegion(new CellRangeAddress(0, 0, startIndex, endIndex));
startIndex += excels.get(x).getCols();
}
XSSFCell cell = row.createCell(startIndex-excels.get(x).getCols());
//设置内容
cell.setCellValue(excels.get(x).getHeadTextName());
if(excels.get(x).getCellStyle() != null){
//设置格式
cell.setCellStyle(excels.get(x).getCellStyle());
}
cell.setCellStyle(fontStyle);
}else{
XSSFCell cell = row.createCell(x);
//设置内容
cell.setCellValue(excels.get(x).getHeadTextName());
if(excels.get(x).getCellStyle() != null){
//设置格式
cell.setCellStyle(excels.get(x).getCellStyle());
}
cell.setCellStyle(fontStyle);
}
}
}
} /**
* 为excel表中循环添加数据
* @param sheet
* @param map 字段名
* @param objs 查询的数据
* @param clazz 无用
*/
private static void createTableRows(
XSSFSheet sheet,
Map<Integer,List<ExcelBean>> map,
List<Map<String,Object>> objs,
Class<?> clazz)
throws IntrospectionException, IllegalAccessException, IllegalArgumentException, InvocationTargetException {
int rowindex = map.size();
int maxkey = 0;
List<ExcelBean> ems = new ArrayList<>();
for(Map.Entry<Integer,List<ExcelBean>> entry : map.entrySet()){
if(entry.getKey() > maxkey){
maxkey = entry.getKey();
}
}
ems = map.get(maxkey);
List<Integer> widths = new ArrayList<Integer>(ems.size());
for(Map<String,Object> obj : objs){
XSSFRow row = sheet.createRow(rowindex);
for(int i=0;i<ems.size();i++){
ExcelBean em = (ExcelBean)ems.get(i);
String propertyName = em.getPropertyName();
Object value = obj.get(propertyName);
XSSFCell cell = row.createCell(i);
String cellValue = "";
if("valid".equals(propertyName)){
cellValue = value.equals(1)?"启用":"禁用";
}else if(value==null){
cellValue = "";
}else if(value instanceof Date){
cellValue = new SimpleDateFormat("yyyy-MM-dd").format(value);
}else{
cellValue = value.toString();
}
cell.setCellValue(cellValue);
cell.setCellType(XSSFCell.CELL_TYPE_STRING);
cell.setCellStyle(fontStyle2);
sheet.autoSizeColumn(i);
}
rowindex++;
} //设置列宽
for(int index=0;index<widths.size();index++){
Integer width = widths.get(index);
width = width<2500?2500:width+300;
width = width>10000?10000+300:width+300;
sheet.setColumnWidth(index, width);
}
}
}

5.导出Excel的controller类

/**
* 导出excle表格
*/
@RequestMapping(value = "/export")
public void exportTotal( HttpServletResponse response ) throws Exception{
response.reset(); //清除buffer缓存
//Map<String,Object> map=new HashMap<String,Object>();
// 指定下载的文件名
response.setContentType("application/vnd.ms-excel;charset=UTF-8");
String excleName="统计表格"+".xlsx";
response.setHeader("Content-Disposition","attachment;filename="+new String(excleName.getBytes(),"iso-8859-1"));
//导出Excel对象
XSSFWorkbook workbook = sysExportExcelInfo.exportExcel();
OutputStream output;
try {
output = response.getOutputStream();
BufferedOutputStream bufferedOutput = new BufferedOutputStream(output);
bufferedOutput.flush();
workbook.write(bufferedOutput);
bufferedOutput.close(); } catch (IOException e) {
e.printStackTrace();
}
}

6.导出Excel的service类

public XSSFWorkbook exportExcel() throws Exception{
//获取dao导出的list集合
List<User> list=userService.exportUser(); List<Map<String,Object>> listMap=ListBeanToListMap(list); List<ExcelBean> excel = new ArrayList<>();
Map<Integer,List<ExcelBean>> map = new LinkedHashMap<>();
//设置标题栏
excel.add(new ExcelBean("序号","id",0));
excel.add(new ExcelBean("名字","name",0));
excel.add(new ExcelBean("年龄","age",0)); map.put(0,excel);
String sheetName = "统计表格";
//调用ExcelUtil方法
XSSFWorkbook xssfWorkbook = ExportUtil.createExcelFile(DcmDemand.class, listMap, map, sheetName);
System.out.println(xssfWorkbook);
return xssfWorkbook;
}

注意：整块导出Excel代码，主要需要改动只是这一行代码：List<User> list=userService.exportUser()，这是调用dao层获取以列表list获得数据的查询。

下面三行代码里的“序号”，“名字”，“年龄”根据User属性来定义的，它将作为表格表头呈现在导出的表格里。这里的User表映射到数据库表t_user表，你需要导出User里哪些字段的数据，就以这样格式excel.add(new ExcelBean("序号","id",0))加到下面代码里：

excel.add(new ExcelBean("序号","id",0));
excel.add(new ExcelBean("名字","name",0));
excel.add(new ExcelBean("年龄","age",0));

其中，以上代码需要把list<String>转换成List<Map<String,Object>>形式，转换方法如下，因为创建表格时需要这样List<Map<String,Object>>格式类型数据：

public static List<Map<String, Object>> ListBeanToListMap(List<User> list) throws NoSuchMethodException,
SecurityException, IllegalAccessException, IllegalArgumentException, InvocationTargetException {
List<Map<String, Object>> listmap = new ArrayList<Map<String, Object>>(); for (Object ob : list) { listmap.add(beanToMap(ob));
}
return listmap;
}

按照以上代码步骤，可以实现在React+antd前端实现导出这样的Excel表格功能：