其他分享
首页 > 其他分享> > Vue+EasyPOI导出Excel(带图片)

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 表达式很像,{{ }} 表示表达式,内部写标签:

如上,最常用的就是 $fe 遍历标签,用法:

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

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

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

EasyPOI测试项目

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

标签:map,Vue,导出,Excel,testMap,new,put,EasyPOI
来源: https://www.cnblogs.com/niceyoo/p/13788623.html