vue+spring boot项目实现easyexcel批量导出

一、EasyExcel导出使用的场景：同级信息归档

二、vue前端代码实现 以通知公告为例，进行excel批量导出： Notice.vue中：

<template>
    <el-form-item>
      <kt-button label="通知导出" type="primary" v-on:click="exportExcel()" />
    </el-form-item>
</<template>
<script>
     export default {
        methods: {
          //导出
        exportExcel: function () {
          this.$api.notice.exportExcel({});
        }     
       }
     }
</script>

http目录下的moudules文件夹下的notice.js，url为后端controller层Excel批量导出的接口路径

//文件导出
export const exportExcel = (data) => {
  return axios({
    url: /notice/noticeExport,
    method: get,
    responseType: blob,
    data
  })
}

在http目录下的axios.js最底部添加如下文件下载方法的代码。

//文件下载
function downLoadFile(res){
  //得到请求到的数据后，对数据进行处理
  let blob = new Blob([res.data],{type:res.data.type});//创建一个类文件对象：Blob对象
  let fileName = decodeURI(res.headers[content-disposition]);//设置文件名称，decodeURI, 可以对后端使用。。。
  if(fileName){
    fileName = fileName.substring(fileName.indexOf(=)+1);
  }
  const link = document.createElement(a)//创建一个a标签
  link.download = fileName;//设置a标签的下载属性
  link.style.display = none;//将a标签设置为隐藏
  link.href = URL.createObjectURL(blob);//把之前处理好的地址赋给a标签的href
  document.body.appendChild(link);//将a标签添加到body中
  link.click();//执行a标签的点击方法
  URL.revokeObjectURL(link.href)//下载完成释放URL对象
  document.body.removeChild(link)//移除a标签
}

在http目录下的axios.js的拦截器部分添加一个判断，不拦截文件下载。 三、spring boot后端代码实现 1、导入依赖

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

2、controller层的文件下载接口：

@RequestMapping("/noticeExport")
public void downLoadExcel(HttpServletResponse response) throws IOException {
    String account = String.valueOf(redisUtil.get("sysUserAccount"));
    List<Notice> noticeList = noticeService.batchDownload(account);
    log.info("noticeList: "+noticeList);
    String fileName = URLEncoder.encode("通知", "UTF-8");
    response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
    response.addHeader("Access-Control-Expose-Headers", "Content-disposition");
    EasyExcel.write(response.getOutputStream(), Notice.class)
            .sheet("sheet")
            .doWrite(noticeList);
}

3、entity层中的Notice类：这里下载涉及到title、content、nickName、publishTime标题，所以这四个标题使用@ExcelProperty注解，其他标签使用@ExcelIgnore注解。EasyExcel自定义Converter解决LocalDateTime日期转换问题。

日期转换类：EasyExcel是支持Date类型，可以直接导入导出，而EasyExcel不支持LocalDateTime类型，因此用自定义转换器可以解决EasyExcel不支持LocalDateTime类型的问题。

/**
 * @author ztt
 * @ClassName: LocalDateTimeConverter
 * @Description: TODO
 * @date 2021年08月01日 15:02
 */
public class LocalDateTimeConverter implements Converter<LocalDateTime> {

    @Override
    public Class<LocalDateTime> supportJavaTypeKey() {
        return LocalDateTime.class;
    }

    @Override
    public CellDataTypeEnum supportExcelTypeKey() {
        return CellDataTypeEnum.STRING;
    }

    @Override
    public LocalDateTime convertToJavaData(CellData cellData, ExcelContentProperty contentProperty,
                                           GlobalConfiguration globalConfiguration) {
        return LocalDateTime.parse(cellData.getStringValue(), DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
    }

    @Override
    public CellData<String> convertToExcelData(LocalDateTime value, ExcelContentProperty contentProperty,
                                               GlobalConfiguration globalConfiguration) {
        return new CellData<>(value.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
    }
}