【EasyExcel】在SpringBoot+VUE项目中引入EasyExcel实现对数据的导出(封装工具类)

在SpringBoot+VUE项目中引入EasyExcel实现导入导出

一、引入EasyExcel

通过maven引入,坐标如下:

xml 复制代码
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel-core</artifactId>
            <version>3.3.2</version>
        </dependency>

二、后端代码演示

下面以权限系统中的角色列表为案例,演示如何导出数据

实体类

java 复制代码
import com.alibaba.excel.annotation.ExcelProperty;
import com.alibaba.excel.annotation.format.DateTimeFormat;
import com.alibaba.excel.annotation.write.style.*;
import com.alibaba.excel.enums.poi.HorizontalAlignmentEnum;
import com.alibaba.excel.enums.poi.VerticalAlignmentEnum;
import lombok.Data;

import java.time.LocalDateTime;

/**
 * 角色excel
 *
 * @author ez4sterben
 * @date 2023/07/17
 */
@ContentRowHeight(30)
@HeadRowHeight(20)
@ColumnWidth(25)
@ContentStyle(horizontalAlignment = HorizontalAlignmentEnum.CENTER, verticalAlignment =  VerticalAlignmentEnum.CENTER)
@Data
public class RoleExcelVO {
    /**
     * 角色名称
     */
    @ExcelProperty(value = "角色名称")
    private String roleName;

    /**
     * 权限字符
     */
    @ExcelProperty(value = "权限字符")
    private String permission;

    /**
     * 角色状态(0停用,1正常)
     */
    @ExcelProperty(value = "角色状态")
    private String status;

    /**
     * 备注
     */
    @ExcelProperty(value = "备注")
    private String remark;
    /**
     * 创建时间
     */
    @DateTimeFormat("yyyy年MM月dd日HH时mm分ss秒")
    @ExcelProperty(value = "创建时间")
    private LocalDateTime createTime;

}

工具类

通过@Component把工具类交给spring管理,在需要使用的地方使用@Resource注入即可

将泛型设置为 " ? ",来表示任意类型,可以通过这一个方法完成所有类的相似导出操作,如果要投入使用的话可以对arrayList和excelVO的类型是否相同进行判断,这里没有进行判断。

EasyExcel工具类

java 复制代码
import com.alibaba.excel.EasyExcel;
import org.springframework.stereotype.Component;

import java.util.ArrayList;

/**
 * 简单excel工具类
 *
 * @author ez4sterben
 * @date 2023/07/17
 */
@Component
public class EasyExcelUtil {

    public static final String XLSX = ".xlsx";

    public String export(ArrayList<?> arrayList, Class<?> excelVO, String sheetName) {
        String fileName = System.currentTimeMillis() + XLSX;
        EasyExcel.write(fileName, excelVO).sheet(sheetName).doWrite(arrayList);
        return fileName;
    }
}

Excel输出工具类

如果你使用的是微服务架构建议考虑该工具类的位置不要和基本模块放在一起,而是和Controller放在同一个模块,下面的常量定义大可不必这么做,但个人认为代码规范还是很重要的。另外输出流的部分代码还可以改进,欢迎提出建议。

java 复制代码
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;

/**
 * 基础excel输出工具
 *
 * @author ez4sterben
 * @date 2023/07/18
 */
public class BaseExcelOutPutUtil {

    public static FileInputStream FILE_INPUT_STREAM;
    
    public static ServletOutputStream SERVLET_OUTPUT_STREAM;

    public static final String EXCEL = "application/vnd.ms-excel";

    public static final String CONTENT_DISPOSITION = "Content-Disposition";

    public static final String ATTACHMENT = "attachment;";

    public static final Integer SUCCESS_CODE = 200;

    public static void exportExcel(HttpServletResponse response, String filePath) throws IOException {
        try {
            FILE_INPUT_STREAM = new FileInputStream(filePath);
            SERVLET_OUTPUT_STREAM = response.getOutputStream();

            response.setContentType(EXCEL);
            response.setHeader(CONTENT_DISPOSITION, ATTACHMENT);
            response.setStatus(SUCCESS_CODE);

            int len = 0;
            byte[] bytes = new byte[1024];
            while ((len = FILE_INPUT_STREAM.read(bytes)) > 0) {
                SERVLET_OUTPUT_STREAM.write(bytes, 0, len);
            }
            SERVLET_OUTPUT_STREAM.flush();
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            // 关闭流
            SERVLET_OUTPUT_STREAM.close();
            FILE_INPUT_STREAM.close();
            new File(filePath).delete();
        }
    }

}

业务层

java 复制代码
	@Resource
    private EasyExcelUtil easyExcelUtil;

	public static final String SHEET_NAME = "角色表";
    
	/**
     * 导出
     *
     * @param ids id
     * @return {@link String}
     * @throws IOException ioexception
     */
    @Override
    public String export(List<Long> ids) throws IOException {
    	// 前端传参ids,查询数据
        List<RolePO> rolePOS = this.listByIds(ids);
        ArrayList<RoleExcelVO> roleExcelVOS = new ArrayList<>();
        rolePOS.forEach(rolePO -> {
        	// 通过hutool的BeanUtils把内容抄送给roleExcelVO
            RoleExcelVO roleExcelVO = new RoleExcelVO();
            BeanUtils.copyProperties(rolePO,roleExcelVO);
            roleExcelVOS.add(roleExcelVO);
        });
        return easyExcelUtil.export(roleExcelVOS,RoleExcelVO.class,SHEET_NAME);
    }

由于我们刚才已经封装过工具类,那么这里不限于角色表的导出,还可以是其他的任何表,比如我要导出用户表,那么我只需要扒这部分代码写入用户的业务层就可以

Controller层

java 复制代码
	/**
     * 导出
     *
     * @return {@link Result}<{@link List}<{@link BusinessVO}>>
     */
    @PostMapping("/export")
    public void export(@RequestBody List<Long> ids, HttpServletResponse response) {
        String filePath;
        try {
            filePath = roleService.export(response,ids);
            BaseExcelOutPutUtil.exportExcel(response,filePath);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }

到此为止后端的代码就展示完毕,其实还可以把导出统一封装在一起,但是目前对于我这个小项目完全是够用了,已经可以省去我很多内容了,读者有兴趣可以自行封装。下面会给各位展示前端代码。

前端VUE调用

java 复制代码
	// 导出
    handleExport() {
      axios({
        method: "post",
        data: this.selectedRoles, // 这里写ids []
        url: this.urls.export, // 这里写你自己的后端url
        responseType: "blob"
      }).then((res) => {
        const blob = new Blob([res.data]);
        const a = document.createElement("a");
        const href = window.URL.createObjectURL(blob);
        a.href = href;
        a.download = '角色表权限.xlsx';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(href);
      }).catch((error) => {});
    },

下载通过blob实现,博主前端写的不规范,请自行更改。

data和url和你自己的后端对应上即可。

结果展示

相关推荐
路在脚下@5 分钟前
Spring如何处理循环依赖
java·后端·spring
苹果醋342 分钟前
React系列(八)——React进阶知识点拓展
运维·vue.js·spring boot·nginx·课程设计
海绵波波1071 小时前
flask后端开发(1):第一个Flask项目
后端·python·flask
王小王和他的小伙伴1 小时前
解决 vue3 中 echarts图表在el-dialog中显示问题
javascript·vue.js·echarts
好名字08212 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
隐形喷火龙2 小时前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
等一场春雨2 小时前
springboot 3 websocket react 系统提示,选手实时数据更新监控
spring boot·websocket·react.js
荆州克莱3 小时前
Golang的性能监控指标
spring boot·spring·spring cloud·css3·技术
Simaoya3 小时前
【vue】css模拟玻璃球体效果(带高光)
前端·css·vue.js
AI人H哥会Java4 小时前
【Spring】控制反转(IoC)与依赖注入(DI)—IoC容器在系统中的位置
java·开发语言·spring boot·后端·spring