vue + easyexcel 前后端分离实现文件下载
maven依赖导入
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.2.10</version>
</dependency>
后端接口样例如下
@PostMapping("download")
public void download(@RequestParam Map<String, Object> params,HttpServletResponse response){
OutputStream os = null;
QueryWrapper<xxx> queryWrapper=new QueryWrapper<>();
//TODO这里加条件
List<xxx> list=xxxService.list(queryWrapper);
try {
String fileName = URLEncoder.encode("xxx","UTF-8");
os = response.getOutputStream();
response.setHeader("Content-disposition", "attachment;filename="+ fileName + ".xlsx");
response.addHeader("Access-Control-Expose-Headers", "Content-disposition");
EasyExcel.write(os, ZhModelListEntity.class).sheet("xxx").doWrite(list);
}catch (IOException e){
e.printStackTrace();
}
前端下载样例
download() {
this.$http({
url: this.$http.adornUrl("xxx"),
method: "post",
responseType:'blob',
params: this.$http.adornParams({
value: this.value,
}),
}).then(
function (res) {
// 得到请求到的数据后,对数据进行处理
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});// 创建一个类文件对象:Blob对象表示一个不可变的、原始数据的类文件对象
let fileName = decodeURI(res.headers['content-disposition']);// 设置文件名称,decodeURI:可以对后端使用encodeURI() 函数编码过的 URI 进行解码。encodeURI() 是后端为了解决中文乱码问题
// console.log(fileName)
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标签
})
},