平时的工作中,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 依赖

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

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

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

  1. @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方法+测试数据

  1. @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 目录下放置了三张图片:

API代码:

  1. 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中调用:

  1. this.exportExcel("/excel/exportExcel", {}).then(res => {
        if(res.byteLength!==0){
            fileDownload(res,employeesName+\'.xls\');
        }else{
            Message.error("无法找到对应的文件!!!");
        }
    });

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

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

导出结果如下:

模板文件:

导出文件:

后端代码:

  1. @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(+ 1 + "");
            entity.setAccountType("开源项目");
            entity.setProjectName("EasyPoi " + i + "期");
            entity.setAmountApplied(* 10000 + "");
            entity.setApprovedAmount((+ 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,可以不写)+ 第一个元素

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

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

EasyPOI测试项目

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

版权声明:本文为niceyoo原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/niceyoo/p/13788623.html