首先前端发起HTTP请求之后，后端返回一个Excel输出流，然后前端用Blob类型接收数据，并且解析响应头数据以及提取源文件名，最后用a标签完成下载。
一、后端代码
（1）导入阿里巴巴的EasyExcel依赖（pom.xml）
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>3.3.1</version>
</dependency>
（2）控制层（GameController.java）
@CrossOrigin
@RequestMapping(value = "exportFile", method = RequestMethod.GET)
@ResponseBody
public void exportFile(@RequestParam("operator") String operator, HttpServletResponse response) throws IOException {
gameService.exportFile(operator, response);
}
（3）接口层（IGameService.java）
void exportFile(String operator, HttpServletResponse response) throws IOException;
（4）实现层（GameServiceImpl.java）
/**
* 王者Excel实体
* 说明：this$0特指该内部类所在的外部类的引用,不需要手动定义,编译时自动加上
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
static class KingExcelEntity {
@ExcelProperty(value = "英雄", index = 0)
private String hero;
@ExcelProperty(value = "等级", index = 1)
private String level;
@ExcelProperty(value = "金币", index = 2)
private String gold;
@ExcelProperty(value = "击杀", index = 3)
private String kill;
@ExcelProperty(value = "被击杀", index = 4)
private String beKilled;
@ExcelProperty(value = "助攻", index = 5)
private String assists;
@ExcelProperty(value = "评分", index = 6)
private String score;
@ExcelProperty(value = "是否MVP", index = 7)
private String mvp;
}
@Override
public void exportFile(String operator, HttpServletResponse response) throws IOException {
List<KingExcelEntity> KingsList = new ArrayList<>();
KingsList.add(new KingExcelEntity("云缨", "15", "20013", "21", "5", "16", "12.9", "True"));
KingsList.add(new KingExcelEntity("王昭君", "15", "17336", "2", "6", "20", "7.5", "False"));
KingsList.add(new KingExcelEntity("狄仁杰", "15", "16477", "9", "8", "22", "8.4", "False"));
KingsList.add(new KingExcelEntity("兰陵王", "15", "16154", "21", "5", "16", "8.6", "False"));
KingsList.add(new KingExcelEntity("赵怀真", "15", "17414", "6", "6", "21", "10.2", "False"));
try {
String fileName = URLEncoder.encode(operator + "-" + "王者荣耀战绩" + ".xlsx", "utf-8");
response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
response.setCharacterEncoding("utf-8");
response.setHeader("Content-disposition", "attachment;filename=" + fileName);
EasyExcel.write(response.getOutputStream(), KingExcelEntity.class)
.sheet("第一页")
.doWrite(KingsList);
} catch (Exception e) {
response.reset();
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
HashMap<String, Object> map = new HashMap<>();
map.put("status", false);
map.put("msg", e.getMessage());
response.getWriter().println(JSONObject.toJSONString(map));
}
}
二、前端代码
（1）视图页面（/src/view/Example/DownloadBlobFile/index.vue）
<template>
<div style="padding: 100px">
<el-button size="small" type="primary" plain @click="handleDownloadBlobFile()">
<el-icon :size="18">
<Download />
</el-icon>
<span>下载文件</span>
</el-button>
</div>
</template>
<script>
export default {
data() {
return {
// ...
}
},
methods: {
/**
* 下载Blob文件句柄方法
*/
handleDownloadBlobFile(evt) {
const operator = '帅龍之龍' // 操作人员
this.$axios.get(
`/api/exportFile`,
{
params: {
'operator': operator
},
headers: {
'Access-Control-Allow-Origin': '*',
'Auth-Token': '5201314'
},
responseType: 'blob'
}
)
.then((res) => {
try {
console.log('响应信息 =>', res)
if (res.data.size > 0) {
// 响应头信息
const headers = res.headers
// attachment;filename=%E5%B8%85%E9%BE%8D%E4%B9%8B%E9%BE%8D-%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80%E6%88%98%E7%BB%A9.xlsx
const contentDisposition = headers['content-disposition']
console.log('contentDisposition =>', contentDisposition)
// application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
const contentType = headers['content-type']
console.log('contentType =>', contentType)
let fileName = contentDisposition.split(`=`)[1]
console.log('解析前文件名 =>', fileName) // 解析前文件名：%E5%B8%85%E9%BE%8D%E4%B9%8B%E9%BE%8D-%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80%E6%88%98%E7%BB%A9.xlsx
fileName = decodeURIComponent(fileName)
console.log('解析后文件名 =>', fileName) // 解析后文件名：帅龍之龍-王者荣耀战绩.xlsx
this.exportFileToExcel(contentType, res.data, fileName)
} else {
this.$message({
message: '文件数据为空', type: 'error', duration: 1000 })
}
} catch (e) {
console.error(e)
this.$message({
message: e, type: 'error', duration: 1000 })
}
})
.catch((e) => {
console.error(e)
this.$message({
message: e, type: 'error', duration: 1000 })
})
},
/**
* 导出Excel文件
*/
exportFileToExcel(contentType, data, fileName) {
const url = window.URL.createObjectURL(
new Blob(
[data],
{
type: contentType
}
)
)
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', `${
fileName}` || 'template.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
},
},
};
</script>
三、效果如下 ~
