EasyExcel+elementUI+vue 上传、下载文件实例

本文为 easyexcel使用具体实例，包含前后端代码，前端使用 vue + elementUI+axios，后端使用 spring boot。

1. 上传文件

1.1. 后端

1.1.1. 添加依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>2.2.6</version>
</dependency>

1.1.2. 实体类

public class Pos_dr_upload {
   
   

    /**
     *  index可指定字段顺序
     */
    @ExcelProperty(value = "清算日期",index = 0)
    private String qsrq;    // 清算日期

    @ExcelProperty(value = "清算商户号",index = 1)
    private String qsshh;    // 清算商户号

    @ExcelProperty(value = "清算终端号",index = 2)
    private String qszdh;    // 清算终端号

    @ExcelProperty(value = "商户名",index = 3)
    private String shm;    // 商户名

    @ExcelProperty(value = "设备商户号",index = 4)
    private String sbshh;    // 设备商户号

    @ExcelProperty(value = "设备终端号",index = 5)
    private String posid;    // 设备终端号

    @ExcelProperty(value = "流水号",index = 6)
    private String lsh;    // 流水号

    @ExcelProperty(value = "交易时间",index = 7)
    private String jysj;    // 交易时间

    @ExcelProperty(value = "卡号",index = 8)
    private String kh;    // 卡号

    @ExcelProperty(value = "金额",index = 9)
    private Integer money;    // 金额

    @ExcelProperty(value = "用户号",index = 10)
    private String yhh;    // 用户号

    @ExcelProperty(value = "上传时间",index = 11)
    private Date createtime;

1.1.3. Controller

/**
 * 文件上传
 * <p>1. 创建excel对应的实体对象
 * <p>2. 由于默认一行行的读取excel，所以需要创建excel一行一行的回调监听器
 * <p>3. 直接读即可
 */
@PostMapping("/upload")
@ResponseBody
public String upload(MultipartFile file) throws IOException {
   
   
    EasyExcel.read(file.getInputStream(), Pos_dr_upload.class, new Pos_dr_uploadListener(pos_dr_uploadService)).sheet().doRead();
    return "success";
}

1.1.4. 回调监听器

/**
 * 模板的读取类
 *
 * @author sunyan
 */
// 有个很重要的点 DemoDataListener 不能被spring管理，要每次读取excel都要new,然后里面用到spring可以构造方法传进去
public class Pos_dr_uploadListener extends AnalysisEventListener<Pos_dr_upload> {
   
   
    private static final Logger LOGGER = LoggerFactory.getLogger(Pos_dr_uploadListener.class);
    /**
     * 每隔5条存储数据库，实际使用中可以3000条，然后清理list ，方便内存回收
     */
    private static final int BATCH_COUNT = 1000;
    List<Pos_dr_upload> list = new ArrayList<Pos_dr_upload>();
    /**
     * 假设这个是一个DAO，当然有业务逻辑这个也可以是一个service。当然如果不用存储这个对象没用。
     */
    private Pos_dr_uploadService pos_dr_uploadService;

    public Pos_dr_uploadListener() {
   
   
    }

    /**
     * 如果使用了spring,请使用这个构造方法。每次创建Listener的时候需要把spring管理的类传进来
     *
     * @param pos_dr_uploadService
     */
    public Pos_dr_uploadListener(Pos_dr_uploadService pos_dr_uploadService) {
   
   
        this.pos_dr_uploadService = pos_dr_uploadService;
    }

    /**
     * 这个每一条数据解析都会来调用
     *
     * @param data    one row value. Is is same as {@link AnalysisContext#readRowHolder()}
     * @param context
     */
    @Override
    public void invoke(Pos_dr_upload data, AnalysisContext context) {
   
   
        LOGGER.info("解析到一条数据:{}", JSON.toJSONString(data));
        list.add(data);
        // 达到BATCH_COUNT了，需要去存储一次数据库，防止数据几万条数据在内存，容易OOM
        if (list.size() >= BATCH_COUNT) {
   
   
            saveData();
            // 存储完成清理 list
            list.clear();
        }
    }

    /**
     * 所有数据解析完成了 都会来调用
     *
     * @param context
     */
    @Override
    public void doAfterAllAnalysed(AnalysisContext context) {
   
   
        // 这里也要保存数据，确保最后遗留的数据也存储到数据库
        saveData();
        LOGGER.info("所有数据解析完成！");
    }

    /**
     * 加上存储数据库
     */
    private void saveData() {
   
   
        LOGGER.info("{}条数据，开始存储数据库！", list.size());
        int listSize = list.size();
        int toIndex = BATCH_COUNT;
        for (int i = 0; i < list.size(); i += BATCH_COUNT) {
   
   
            if (i + BATCH_COUNT > listSize) {
   
    // 作用为toIndex最后没有1000条数据则剩余几条newList中就装几条
                toIndex = listSize - i;
            }
            List<Pos_dr_upload> pos_dr_upload = list.subList(i, i + toIndex);
            //批量插入
            pos_dr_uploadService.insertBatch(pos_dr_upload);
        }
        LOGGER.info("存储数据库成功！");
    }

}

1.1.5. Mapper

<!--批量导入excel-->
<insert id="insertBatch" parameterType="com.demo.bean.Jfzd.Pos_dr_upload">
    begin
    <foreach collection="list" item="item" index="index">
        insert into pos_dr(qsrq,qsshh,qszdh,shm,sbshh,posid,lsh,jysj,kh,money,yhh,createtime)
        values(
        #{item.qsrq,jdbcType=VARCHAR},
        #{item.qsshh,jdbcType=VARCHAR},
        #{item.qszdh,jdbcType=VARCHAR},
        #{item.shm,jdbcType=VARCHAR},
        #{item.sbshh,jdbcType=VARCHAR},
        #{item.posid,jdbcType=VARCHAR},
        #{item.lsh,jdbcType=VARCHAR},
        #{item.jysj,jdbcType=VARCHAR},
        #{item.kh,jdbcType=VARCHAR},
        #{item.money,jdbcType=VARCHAR},
        #{item.yhh,jdbcType=VARCHAR},
        sysdate
        );
    </foreach>
    end;
</insert>

1.2. 前端

1.1. 自动上传

<el-upload