vue 導(dǎo)出 下載 文件 excel 三種方式 ,大家可以參考一下
1. window.location.href
// 導(dǎo)出
handleExport() {
let params = this.filter;
let str = "";
for (let key in params) {
if (params[key]) {
str += `&${key}=${params[key]}`;
}
}
window.location.href = `${process.env.VUE_BASE_API}/p_coupon/?download=1${str}`;
},
2. axios 請(qǐng)求
// 導(dǎo)出
handleExport() {
this.exportLoading = true;
let params = "";
if (this.selectDate != "") {
params = {
time: this.selectDate.replace(/-/g, "/"),
};
}
axios({
method: "GET",
url: `${process.env.VUE_BASE_API}/userDimensionHistory/export`,
params: params,
responseType: "blob",
headers: {
Authorization: getToken(),
},
})
.then((res) => {
this.exportLoading = false;
const fileread = new FileReader();
fileread.onload = (e) => {
try {
const message = JSON.parse(e.target.result);
console.log(message);
} catch (e) {
let url = window.URL.createObjectURL(res.data);
let link = document.createElement("a");
let timer = new Date().getTime();
link.download = timer + ".xls";
link.href = url;
link.click();
}
};
fileread.readAsText(res.data);
})
.catch((err) => {
this.exportLoading = false;
console.log(err);
});
},
3. el-link 方式
<el-link type="primary" :href="scope.row.fileUrl">下載</el-link>
<el-link :href="`${down_url}/userDimensionHistory/export${down_time}`">下載</el-link>