vue2+elementui调用后台接口导出excel文件功能
在项目中,新增个 Excel导出功能,沟通后,后端小姐姐说,直接调接口就行,,因为有查询条件,所以需要把查询条件也传给后台,以下是代码:
exportExcel() {
let searchDatas = JSON.parse(JSON.stringify(this.searchOption)); // 查询就是表格上面的查询条件
// 这个是多选的状态,处理成后台要的格式
if(searchDatas.allStatus) {
searchDatas.allStatus= searchDatas.allStatus.join(',')
}
const reqConfig = {
url: '后台接口',
method: "post",
data: {
...searchDatas
},
responseType: "blob",
};
this.$request(reqConfig)
.then((res) => {
let url = window.URL.createObjectURL(
new Blob([res], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
})
);
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
let excelName = "导出信息.xlsx"; // 此处修改自己想要的导出后的文件名
link.setAttribute("download", excelName);
document.body.appendChild(link);
link.click();
link.remove();
window.URL.revokeObjectURL(url);
})
.catch((e) => {
console.log(e);
});
},