SpringBoot + easyexcel + vue 下载 excel 问题
最近有个下载 excel 的需求，后端导出 excel 的功能实现我选用了 easyexcel，但是 vue 前端老是下载不了，发现网上写的很多普遍的方法用着不行。查了下发现了可行的方法，这里写下总结。
1. 后端
不知为啥用 Post 请求下载不了，这里改成了 Get 请求
Param.java 请求参数对象
@Data
public class Param {
private String aa;
private String bb;
private String cc;
}
Controller层
@GetMapping("/download")
public void download(HttpServletResponse response, Param param) throws IOException {
// 这里注意 有同学反应使用swagger 会导致各种问题，请直接用浏览器或者用postman
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf-8");
String fileName = URLEncoder.encode("demo", "UTF-8");
response.setHeader("Content-disposition", "attachment;filename=" + new String(fileName.getBytes("utf-8"),"ISO8859-1") + ".xlsx");
EasyExcel.write(response.getOutputStream(), DownloadData.class).sheet("模板").doWrite(data());
}
/**
* 测试数据
*/
private List<DownloadData> data() {
List<DownloadData> list = new ArrayList<DownloadData>();
for (int i = 0; i < 10; i++) {
DownloadData data = new DownloadData();
data.setString("字符串" + 0);
data.setDate(new Date());
data.setDoubleData(0.56);
list.add(data);
}
return list;
}
DownloadData.java
/**
* 基础数据类
*
* @author Jiaju Zhuang
**/
@Data
public class DownloadData {
@ExcelProperty("字符串标题")
private String string;
@ExcelProperty("日期标题")
private Date date;
@ExcelProperty("数字标题")
private Double doubleData;
}
2. 前端
manage.js
为下载返回 url
//数据导出
export function download(){
return url+/api/dataset/excel/download
}
table.vue
// 引入download方法
import {
download} from @/api/manage
// 下载按钮
<a-button icon="download" @click="downloadExcel()">
导出表格
</a-button>
下载方法
export default {
downloadExcel() {
let url = download()
const param = ?aa= + this.aa + &bb= + this.bb + &cc= + this.cc
//创建一个a标签元素
const a = document.createElement(a)
//给a标签设置链接属性
a.href = url + param
//调用点击事件
a.click();
}
}
