vue下载功能
程序员文章站
2022-03-09 07:51:50
场景需要:在一个数据表的右上方有一个下载按钮,点击之后,进行这个表格的下载。模板下载 data: //下载时发送请求的数组 downloadArry: [],methods: //下载事件 downloadTable() { //制作一个发送请求时的参数 this.columns.forEach(...
场景需要:在一个数据表的右上方有一个下载按钮,点击之后,进行这个表格的下载。
<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);
},
本文地址:https://blog.csdn.net/weixin_43131046/article/details/114304199
上一篇: 详述DB2分页查询及Java实现
下一篇: 安卓系统的开发