后端提供文件流(如果后端提供下载链接的话就没这么麻烦了,location.href也好<a>
也好都可以),前端用Blob对象读取流并使用<a>
标签进行下载。
dowm(index, rows) {//下载
this.axios({
method: 'post',
url: '',//地址
data: this.$qs.stringify({
//参数
}),
responseType: 'blob'
}).then(response => {
this.download(response.data)//获取到返回数据
}).catch((error) => {
console.log(error);
})
},
download (data) {
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]));
let link = document.createElement('a')
//对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
//IE10以上支持blob但是依然不支持download
if ('download' in document.createElement('a')) { //支持a标签download的浏览器
link.style.display = 'none'
link.href = url
link.setAttribute('download', '下载的文件名字')
document.body.appendChild(link)
link.click()//执行点击
window.URL.revokeObjectURL(link.href)//释放url
document.body.removeChild(link)//释放标签
}else{//其他浏览器
navigator.msSaveBlob(url, dowmName)
}
},
后端
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);
}
}
参考文章