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

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

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

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

1.导出图标

按钮代码：

 <Button type="primary" onClick={this.excelPort} >导出</Button>

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表格功能：

若有什么不明白的，可以评论留言，我会尽量解答。