场景需要:在一个数据表的右上方有一个下载按钮,点击之后,进行这个表格的下载。
<el-button type="success" @click="downloadTable">模板下载</el-button>
data:
//下载时发送请求的数组
downloadArry: [],
methods:
//下载事件
downloadTable() {
//制作一个发送请求时的参数
this.columns.forEach((item) => {
this.downloadArry.push({ fildName: item.prop });
});
this.$http({
method: "post",
url: "/data/table/download",
params: { userId: this.userId },
data: {
dataMap: this.downloadArry,
tableName: this.table_info.name,
tableAnnotation: this.table_info.des,
},
responseType: "blob",
})
.then((res) => {
this.exportMethd(this.table_info.name, res.data);
this.downloadArry = [];
})
.catch((err) => {
console.log(err);
this.downloadArry = [];
});
},
// 下载方法
exportMethd(title, data) {
const link = document.createElement("a");
// 决定下载的是什么格式的文件
let blob = new Blob([data], {
type: "application/vnd.ms-excel;charset=utf-8",
});
link.style.display = "none";
link.href = URL.createObjectURL(blob);
link.download = title; // 下载的文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},