一、前言

平时的工作中，Excel 导入导出功能是非常常见的功能，无论是前端 Vue (js-xlsx) 还是 后端 Java (POI)，如果让大家手动编码实现的话，恐怕就很麻烦了，尤其是一些定制化的模版导入导出，笔者前几年就用原生 POI 编写过报表之类的需求，像是 自定义 Word、Excel 导入导出，表格合并等等，那过程简直恶心的一批....

后来接触到了 EasyPOI ，功能也如同名称一样简单，内部对 POI 进行了良好的封装，开箱即用，即便是从来没有接触过 POI，只要看看简单的示例，就能很方便的编写出 Excel 、Word 导出导出，以及模版自定义导入导出等。

本篇主要模拟开发中最常用的场景「后端提供excel下载接口，前端调用」，快速的实现 Excel 的导出功能。

二、本文环境

SpringBoot 2.2.2 + Vue(axios) + easypoi 4.1.0(boot版本)

环境为前后端分离项目，后端采用的 Spring Boot 2.2.2 版本，easyPOI 采用的是 easypoi-spring-boot-starter 4.1.0 (截止 2020.09.29 最新版)。

pom.xml 依赖

cn.afterturn

easypoi-spring-boot-starter

4.1.0

三、基于注解实现 Excel 简单导出

通过简单的注解，完成以前复杂的写法。

创建一个测试类 ExcelDemo.java(含图片)

@Data

public class ExcelDemo {

@Excel(name = "员工名称")

private String employeesName;

@Excel(name = "员工图片",type = 2 ,width = 30 , height = 50)

private String image;

@Excel(name = "员工年龄")

private Integer age;

@Excel(name = "创建日期", format = "yyyy-MM-dd HH:mm", width = 20)

private Date createDate;

@Excel(name = "更新日期", format = "yyyy/MM/dd HH:mm", width = 20)

private Date updateDate;

}

简单看一下这个 @Excel 注解主要的值：

属性类型默认值功能

name

String

null

列名,支持name_id

type

int

1

导出类型 1 是文本， 2 是图片，3 是函数,10 是数字 默认是文本

width

double

10

列宽

height

double

10

列高,后期打算统一使用@ExcelTarget的height,这个会被废弃,注意

format

String

“”

时间格式,相当于同时设置了exportFormat 和 importFormat

imageType

int

1

图片读取类型，1表示从 file 读取，2表示从数据库读取

关于图片路径

着重说明一下这个图片路径，当 type 取值为 2 的时候表示导出为图片，同时配合使用的是 imageType 参数，该参数决定是从 file 读取，还是去数据库读取，默认为从 file 中读取，记得很早之前，有小伙伴图片是直接 base64 存数据库的，不过现在是没有人干这种事了。。。

创建一个Controller方法+测试数据

@RequestMapping(value = "/exportExcel", method = RequestMethod.POST)

public void exportExcel(String id,HttpServletResponse response) throws Exception {

List excelDemoList = new ArrayList<>();

for (int i = 0; i 

ExcelDemo excelDemo = new ExcelDemo();

excelDemo.setEmployeesName("张"+i);

excelDemo.setImage("/Users/niceyoo/workspace/File/"+i+".png");

excelDemo.setAge(10+i);

excelDemoList.add(excelDemo);

}

ExportParams params = new ExportParams("员工数据", "员工");

Workbook workbook = ExcelExportUtil.exportExcel(params, ExcelDemo.class, excelDemoList);

String fileName = "saleData.xlsx";

response.setCharacterEncoding("UTF-8");

response.setContentType("application/vnd.ms-excel; charset=utf-8");

response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "utf-8"));

OutputStream outputStream = response.getOutputStream();

workbook.write(outputStream);

outputStream.flush();

outputStream.close();

}

我在 /Users/niceyoo/workspace/File 目录下放置了三张图片：

前端Vue+axios请求

API代码：

import axios from 'axios';

export const exportExcel = (url, params) => {

let accessToken = getStore("accessToken");

return axios({

method: 'post',

url: 'http://127.0.0.1:6666/excel/exportExcel',

data: params,

responseType: 'arraybuffer',

headers: {

'Content-Type': 'application/json;charset=utf-8',

'accessToken': 'niceyoo'

}

});

};

vue中调用：

this.exportExcel("/excel/exportExcel", {}).then(res => {

if(res.byteLength!==0){

fileDownload(res,employeesName+'.xls');

}else{

Message.error("无法找到对应的文件！！！");

}

});

其中 fileDownload 方法为引入的 js-file 依赖：

"js-file-download": "^0.4.12",

导出结果如下：

四、自定义模板导出

模板文件：

导出文件：

后端代码：

@RequestMapping("download")

public String download(ModelMap modelMap) {

Map map = new HashMap();

TemplateExportParams params = new TemplateExportParams("doc/foreach.xlsx");

List list = new ArrayList();

for (int i = 0; i 

TemplateExcelExportEntity entity = new TemplateExcelExportEntity();

entity.setIndex(i + 1 + "");

entity.setAccountType("开源项目");

entity.setProjectName("EasyPoi " + i + "期");

entity.setAmountApplied(i * 10000 + "");

entity.setApprovedAmount((i + 1) * 10000 - 100 + "");

list.add(entity);

}

map.put("entitylist", list);

map.put("manmark", "1");

map.put("letest", "12345678");

map.put("fntest", "12345678.2341234");

map.put("fdtest", null);

List> mapList = new ArrayList>();

for (int i = 0; i 

Map testMap = new HashMap();

testMap.put("id", "xman");

testMap.put("name", "小明" + i);

testMap.put("sex", "1");

mapList.add(testMap);

}

map.put("maplist", mapList);

mapList = new ArrayList>();

for (int i = 0; i 

Map testMap = new HashMap();

testMap.put("si", "xman");

mapList.add(testMap);

}

map.put("sitest", mapList);

modelMap.put(TemplateExcelConstants.FILE_NAME, "用户信息");

modelMap.put(TemplateExcelConstants.PARAMS, params);

modelMap.put(TemplateExcelConstants.MAP_DATA, map);

return TemplateExcelConstants.EASYPOI_TEMPLATE_EXCEL_VIEW;

}

关于模版指令：

跟 el 表达式很像，{ { }} 表示表达式，内部写标签：

空格分割

三目运算 { {test ? obj:obj2}}

n: 表示 这个cell是数值类型 { {n:}}

le: 代表长度{ {le:()}} 在if/else 运用{ {le:() > 8 ? obj1 : obj2}}

fd: 格式化时间 { {fd:(obj;yyyy-MM-dd)}}

fn: 格式化数字 { {fn:(obj;###.00)}}

fe: 遍历数据,创建row

!fe: 遍历数据不创建row

$fe: 下移插入,把当前行,下面的行全部下移.size()行,然后插入

#fe: 横向遍历

v_fe: 横向遍历值

!if: 删除当前列 { {!if:(test)}}

单引号表示常量值 '' 比如'1' 那么输出的就是 1

&NULL& 空格

]] 换行符 多行遍历导出

sum： 统计数据

如上，最常用的就是 $fe 遍历标签，用法：

fe标志+ 冒号 + list数据 + 单个元素数据(默认t，可以不写)+ 第一个元素

{ {$fe: maplist t t.id }}

t 表示预定义值，表示集合中的任意对象，如上表示，mplist 中每个对象叫做 t，t.id 就表示 t 单个元素数据的 id 属性，t 的作用就是占位符。

EasyPOI测试项目

可以下载这个项目跑一下，基本覆盖了比较全的用法示例。