vue+spring boot项目实现easyexcel批量导出
一、EasyExcel导出使用的场景：同级信息归档
二、vue前端代码实现
以通知公告为例，进行excel批量导出：
Notice.vue中：
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、导入依赖
com.alibaba
easyexcel
2.2.6
2、controller层的文件下载接口：
@RequestMapping("/noticeExport")
public void downLoadExcel(HttpServletResponse response) throws IOException {
String account = String.valueOf(redisUtil.get("sysUserAccount"));
List 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日期转换问题。
@Builder
@Data
@AllArgsConstructor//添加全参构造函数
@NoArgsConstructor//添加午无参构造函数
public class Notice extends BaseRowModel {
@ExcelIgnore
private Long id;//通知id
@ExcelProperty(value = "标题",index = 0)
private String title;//通知标题
@ExcelProperty(value = "内容",index = 1)
private String content;//通知内容
@ExcelIgnore
public String account;//作者账号
@ExcelProperty(value = "作者",index = 2)
private String nickName;//作者名
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@ExcelProperty(value = "发布时间",index = 3,converter = LocalDateTimeConverter.class)
public LocalDateTime publishTime;//发布时间
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@ExcelIgnore
public LocalDateTime createTime;//创建时间
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@ExcelIgnore
public LocalDateTime updateTime;//修改时间
}
日期转换类：EasyExcel是支持Date类型，可以直接导入导出，而EasyExcel不支持LocalDateTime类型，因此用自定义转换器可以解决EasyExcel不支持LocalDateTime类型的问题。
/**
* @author ztt
* @ClassName: LocalDateTimeConverter
* @Description: TODO
* @date 2021年08月01日 15:02
*/
public class LocalDateTimeConverter implements Converter {
@Override
public Class 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 convertToExcelData(LocalDateTime value, ExcelContentProperty contentProperty,
GlobalConfiguration globalConfiguration) {
return new CellData<>(value.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
}
}
来看一下效果图吧：
截图只展示部分。
