接口导出文件功能
1.写接口
export function getExport(params) {
return fetch({
url: ******.export,
method: 'post',
data: params,
responseType:'blob',
})
}
2.编写前端页面
<el-button
:loading="exportDisable"
:disabled="exportDisable"
size="mini"
style="
float: right;
margin-left: 10px;
margin-top: -27.5px;
background-color: #06948c;
color: #ffffff;
"
@click="daochu"
>
导出
</el-button>
3.请求接口,数据准备
data(){
return {
exportDisable: false, // 导出loading}
},
methods:{
daochu() {
this.exportDisable = true
getExport({
导出的参数
}).then(res => {
const link = document.createElement("a");
let blob = new Blob([res]);
link.style.display = 'none';
link.download = '文件名.xls'
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
this.exportDisable = false
}).catch(error => {
this.exportDisable = false
console.log(error)
})
},
}