Vue+EasyPOI导出Excel（带图片）

一、前言

平时的工作中，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 最新版）。

EasyPOI 开发文档：http://doc.wupaas.com/docs/easypoi/easypoi-1c0u6ksp2r091

EasyPOI 官方示例：https://gitee.com/lemur/easypoi-test

pom.xml 依赖

<!-- easypoi -->
<dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-spring-boot-starter</artifactId>
    <version>4.1.0</version>
</dependency>

三、基于注解实现 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<ExcelDemo> excelDemoList = new ArrayList<>();
    for (int i = 0; i < 3; 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<String, Object> map = new HashMap<String, Object>();
    TemplateExportParams params = new TemplateExportParams("doc/foreach.xlsx");
    List<TemplateExcelExportEntity> list = new ArrayList<TemplateExcelExportEntity>();

    for (int i = 0; i < 4; 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<Map<String, Object>> mapList = new ArrayList<Map<String, Object>>();
    for (int i = 0; i < 1; i++) {
        Map<String, Object> testMap = new HashMap<String, Object>();
        testMap.put("id", "xman");
        testMap.put("name", "小明" + i);
        testMap.put("sex", "1");
        mapList.add(testMap);
    }
    map.put("maplist", mapList);

    mapList = new ArrayList<Map<String, Object>>();
    for (int i = 0; i < 6; i++) {
        Map<String, Object> testMap = new HashMap<String, Object>();

        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测试项目

• https://gitee.com/lemur/easypoi-test

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