实现的方法有很多,这边只是提供一个Demo,该Demo可用。
说下思路:后端提供文件流(如果后端提供下载链接的话就没这么麻烦了,location.href也好<a>也好都可以),前端用Blob对象读取流并使用<a>标签进行下载。
前端代码
axios的语法结构详见文档 传送门
axios.post(
'a.bbb.cc/d/ee',//请求的url
{
'data':this.data//请求数据
},
{
responseType:'blob'//服务器返回的数据类型
}
).then((res)=>{
//此处有个坑。这里用content保存文件流,最初是content=res,但下载的test.xls里的内容如下图1,
//检查了下才发现,后端对文件流做了一层封装,所以将content指向res.data即可
//另外,流的转储属于浅拷贝,所以此处的content转储仅仅是便于理解,并没有实际作用=_=
const content = res.data
const blob = new Blob([content])//构造一个blob对象来处理数据
const fileName = 'test.xls'
//对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
//IE10以上支持blob但是依然不支持download
if ('download' in document.createElement('a')) { //支持a标签download的浏览器
const link = document.createElement('a')//创建a标签
link.download = fileName//a标签添加属性
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
document.body.appendChild(link)
link.click()//执行下载
URL.revokeObjectURL(link.href) //释放url
document.body.removeChild(link)//释放标签
} else { //其他浏览器
navigator.msSaveBlob(blob, fileName)
}
}).catch((err)=>{
console.log(err);
})
图1
后端部分代码
public void export(HSSFWorkbook workbook, String fileName, HttpServletResponse response) throws Exception{
if(workbook !=null) {
String headStr = "attachment; filename=\"" + fileName + "\"";
response.setContentType("APPLICATION/OCTET-STREAM");//返回格式为流
response.setHeader("Content-Disposition", headStr);
OutputStream out = response.getOutputStream();
workbook.write(out);
}
}