0)背景
我想导出一张2019年12月份并且hrID为2的所有销售信息的excel表,后台已经写好了,Controller返回的是一个ResponseEntity<byte[]>
,简言之:我想要一张excel表,导出的内容为2019年12月份某一个人的销售情况
1)前端封装axios
let base = '';
export const downloadRequest = (url, params)=>{
return axios({
method: 'GET',
url: `${base}${url}`,
responseType: 'blob',
headers: {
'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
}
});
}
2全局引入
import {downloadRequest} from "@/util/api"
Vue.prototype.downloadRequest = downloadRequest;
2写方法
exportWork(){
this.exportWorkDisabled = true;//导出按钮开启禁用
this.exprotWorkIcon = 'el-icon-loading';//导出按钮更换icon
this.exportWorkText = '正在导出...';//导出按钮更换文字
this.downloadRequest('后台接口?参数='+参数1+'&参数2='+参数2).then(data=>{
if(data){
const blob = new Blob([data]);
const aEle = document.createElement('a');// 创建a标签
const href = window.URL.createObjectURL(blob);// 创建下载的链接
aEle.href = href;
aEle.download = new Date()+"销售表.xls"; //下载后文件名
document.body.appendChild(aEle);
aEle.click();// 点击下载
document.body.removeChild(aEle);//下载完成移除元素
window.URL.revokeObjectURL(href);//释放掉blob对象
this.exportWorkDisabled = false;//导出按钮关闭禁用
this.exprotWorkIcon = 'fa fa-download';//导出按钮还原icon
this.exportWorkText = '导出';//导出按钮还原文字
}
});
},