springboot + easyExcel + vue axios 实现excel下载
温馨提示：
本文最后更新于 2023年03月08日，已超过 409 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。
前几天有个需求，导出excel，我想着简单啊，暂时不管，当我今天写的时候才发现，这玩意居然下载不了。嗯哼，那我就讲一下具体的实现吧。
1. 导入依赖文件
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>3.1.1</version>
</dependency>
2. 写controller接口
这块别忘了写HttpServletResponse
3. 查询数据 以Collection子集为返回类型
我这边使用mybatis-plus查询的，直接返回的list
4. 设置响应头
// 设置response
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf8");
response.addHeader("Access-Control-Expose-Headers", "Content-disposition");
// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
String fileName = URLEncoder.encode("用户扫码记录", "UTF-8");
response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
5. 调用excel进行写数据
outputStream = response.getOutputStream();
EasyExcel.write(outputStream, UserShareCourseDto.class).sheet().doWrite(collect);
outputStream.flush();
先获取到outputstream，然后调用
后端这就完了
6. 写导出按钮
7. 写方法
this.downRequest("/excel/user-share-course")
.then((res) => {
let blob = new Blob([res]);
let downloadElement = document.createElement("a");
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = `用户扫码记录.xlsx`; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
this.loading = false
})
这块我的downRequest是封装的axios
然后就完成了，我们打开页面点击导出就ok了
正文到此结束
- 本文标签： vue Spring Boot
- 本文链接： https://blog.wangqi2020.top/article/40
- 版权声明： 本文由王祁原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
