spring+vue前后端中EasyExcel写文件的简单使用

java/js前后端中EasyExcel写文件的简单使用

EasyExcel官网：EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel (alibaba.com)

由于网上大多数教程前端没有明确写清楚如何接收easyExcel返回的数据，以及大多数教程的代码相对有些复杂，因此此文特地来梳理能初步简单使用easyexcel的方法

后端

引入easyexcel依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>3.1.1</version>
</dependency>

注释版

用注释方式使用easyexcel适用于表头简单，且除表格数据外没有动态数据要输出的情况。

表格的样式主要由实体类中的注解实现

entity实体类

将实体类的字段分为输出字段和忽略字段，在输出的excel中分别为显示和不显示。@ExcelProperty中的主要属性：value:表头，index:字段为表格第几列（0开始）

含义	注释
输出字段	@ExcelProperty(“表头名”)或@ExcelProperty(value = “表头名”, index = 第几列)
忽略字段	@ExcelIgnore

@Data
//表格头样式
@HeadFontStyle(fontHeightInPoints = 14)//字体大小
@HeadRowHeight(20)//表头行高
@HeadStyle(fillPatternType = FillPatternTypeEnum.SOLID_FOREGROUND, fillForegroundColor = 31)//表头颜色
public class xxx{
    @ExcelProperty(value = "类别", index = 11)//value:表头，index:字段为表格第几列（0开始）
	@ColumnWidth(value = 12)
	@ContentStyle(horizontalAlignment = HorizontalAlignmentEnum.CENTER)
    private Date resStarttime;
    
	
	@ExcelIgnore //不输出的字段，若不加该注解也会默认输出
	@ApiModelProperty(value="提货单号")
	private Long riId;
    ...
}

显示效果
​​

多级表头也可以利用注解形式实现，只需要改变注解中的value值即可，由前到后表头级数增加，相同的表头名会合并单元格

显示效果

其他注解可参考：【java学习】EasyExcel的简单使用_hermit_f的博客-优快云博客

代码版

代码版适用于表格头中带有动态数据，比如当前日期等信息的表格

在EasyExcel设置head的（具体看controller部分）情况下，注解中的表头名value失效，仅序列index有效。若设置样式则样式的注解也失效

@Data
public class entity {
   /**
    * 日发运量
    */
   @ExcelProperty(value = {"公路发运量(吨)"}, index = 1)
   @ApiModelProperty(value = "日发运量")
   private BigDecimal dayAmount;
   /**
    * 名称
    */
   @ExcelProperty(value = {"月度累计发运量(吨)"}, index = 2)
   @ApiModelProperty(value = "月发运量")
   private BigDecimal monthAmount;
   /**
    * 物料名称
    */
   @ExcelProperty(value = {"产品名称"}, index = 0)
   @ApiModelProperty(value = "产品名称")
   private String proName;
}

通用部份

controller

主要利用EasyExcel的write方法生成输出流，可以根据不同的需要扩展EasyExcel链式调用的内容，生成不同的效果。

@RestController
@AllArgsConstructor
@RequestMapping("/mapping" )
public class Controller {

    @GetMapping("/exportExcel")
    public void exportExcel(HttpServletResponse response,String date) throws IOException {
        //文件名，以下方法用于防止中文编码错误
        String fileName = URLEncoder.encode("name"+date, "UTF-8").replaceAll("\\+", "%20");
        //设置输出内容格式和请求头
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
        response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName +".xlsx");
        //采用链式调用代码更清晰
        EasyExcel.write(response.getOutputStream(), ResOutputVo.class)//匹配实体类
            .sheet("name")//工作表名
            .head(getExcelHead(date))//设置表格头；在不设置表格头的情况下，默认使用实体类注解中的表格头
            .registerWriteHandler(new LongestMatchColumnWidthStyleStrategy())//根据数据宽度自动匹配表格宽度
            .registerWriteHandler(setExcelConfigure())//设置表格样式
            .doWrite(getList(date));//写数据
	}
}

表头方法

返回一个List<List>类型的变量，作为表格头

将该类型变量是视作表头按列划分，从上到下排布。若两列相同行的位置存在相同的表头，则在文件中会显示为合并单元格

public List<List<String>> getExcelHead(String date) {
		
    	List<List<String>> headList= ListUtils.newArrayList();
		String title="公路产品出厂情况表";
		String dateHead="日期:"+date;
		ArrayList<String> tableHead=ListUtils.newArrayList("产品名称","公路发运量(吨)","月度累计发运量(吨)");
		tableHead.forEach(head->{
			headList.add(ListUtils.newArrayList(title,dateHead,head));
		});
		return  headList;
	}

表头样式

以下实现一个表格样式策略，具体根据需要进行增减

public HorizontalCellStyleStrategy setExcelConfigure() {
		// 头的策略
		WriteCellStyle headWriteCellStyle = new WriteCellStyle();
		// 背景色
		headWriteCellStyle.setFillForegroundColor(IndexedColors.WHITE.getIndex());
		WriteFont headWriteFont = new WriteFont();
		// 加粗
		headWriteFont.setBold(true);
//     headWriteFont.setFontHeightInPoints((short) 14); // 设置行高，不重要
		headWriteCellStyle.setWriteFont(headWriteFont);

		// 内容的策略
		WriteCellStyle contentWriteCellStyle = new WriteCellStyle();
		// 字体策略
		WriteFont contentWriteFont = new WriteFont();
		// 字体大小
		contentWriteCellStyle.setWriteFont(contentWriteFont);
		//边框
		//导出数据垂直居中
		contentWriteCellStyle.setVerticalAlignment(VerticalAlignment.CENTER);
		//导出数据水平居中
		contentWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.CENTER);
		contentWriteCellStyle.setBorderLeft(BorderStyle.NONE);
		contentWriteCellStyle.setBorderTop(BorderStyle.NONE);
		contentWriteCellStyle.setBorderRight(BorderStyle.NONE);
		contentWriteCellStyle.setBorderBottom(BorderStyle.NONE);

		//设置 自动换行
		contentWriteCellStyle.setWrapped(true);
		//设置
		// 这个策略是 头是头的样式 内容是内容的样式 其他的策略可以自己实现
		return new HorizontalCellStyleStrategy(headWriteCellStyle, contentWriteCellStyle);
	}

数据内容

即返回一个对应实体类的List即可

前端

以下以vue为例

export function exportExcel(query) {
    return request({
        url: "/nwlgl/res/resOutput/exportExcel",
        method: "GET",
        responseType: 'blob',
        params: query
    })
}

接收响应并产生文件下载形式

exportExcel(
    Object.assign(
        {
            date:this.date,//具体所需携带参数，后端controller接收方中按需增减
        }
    )
).then((response) => {
    console.log(response)
    let fileName = "公路发运量"+this.searchData.date+".xlsx";//真正的下载后产生的文件名
    const blob = response.data
    const link = document.createElement('a')
    link.href = URL.createObjectURL(new Blob([blob]))
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    window.setTimeout(function() {
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
    }, 0)
})

注意点

优先级

综上，在设置表头和样式时同时使用了注释和代码时，优先级代码>注释

文件名

设置响应请求头中的文件名不是下载后文件显示的名字↓

  response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName +".xlsx");

实际文件显示名为前端设置的名字↓

let fileName = "公路发运量"+this.searchData.date+".xlsx";

请求类型和接收处理

建议前端在请求方式中加入响应类型为blob型，可以使得接收到的data为blob类型。

特别在后端Controller加了 @RestController 注解时，可以使得前端能正确获得数据

 responseType: 'blob',

以及在接受响应时建议new Blob对接收到的数据进行处理，避免可能存在的数据类型错误

 const blob = response.data
 const link = document.createElement('a')
 link.href = URL.createObjectURL(new Blob([blob]))

实体类getter/setter

当封装好的实体类忘记写 @Data 注解或getter/setter方法时，代码中没有直接调用类型的情况下启动程序可能不会报错，但会导致输出的excel中数据为空。一定要注意！