Vue-点击获取文件地址并下载文件
html:<div class="downmb"><el-button type="primary" @click="downmb">下载模版</el-button></div>js:// 下载模版文件downmb: async function() {let _self = this;...
·
Vue-点击获取文件地址并下载文件
普通下载
html:
<div class="downmb">
<el-button type="primary" @click="downmb">下载模版</el-button>
</div>
js:
// 下载模版文件
downmb: async function() {
let _self = this;
let { data: applyRes } = await _self.$http.get("/export");
console.log("data", applyRes);
window.location.href = data
//this.download(applyRes);
// if (applyRes.result === "success") {
// _self.$message({
// type: "success",
// message: "申请成功"
// });
// // _self.$router.push({ name: "portal" });
// } else {
// _self.$message({
// type: "error",
// message: "申请失败"
// });
// }
},
// 下载文件
download(data) {
if (!data) {
return;
}
let url = window.URL.createObjectURL(new Blob([data]));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", "考勤导入模版.xlsx");
document.body.appendChild(link);
link.click();
}
1.通过window.open
window.open('https://1.1.1.1/test.txt')
为此,博主找到html中a标签的一种方法,如下
<a href="http://1.1.1.1/test.txt" download="test">
<el-button class = "button" size="medium" @click="saveInfo" round>保存配信息至本地</el-button>
</a>
此处最重要的是download属性,加上后会实现下载效果,download的值为文件名,如果删去download将如同上面两种方法只能打开文件内容
在本地新窗口打开预览可下载
api
js
let { data } = await downloadEntryBook({ params });
console.log("1", data);
let url = window.URL.createObjectURL(data);
window.open(url);
更多推荐
已为社区贡献4条内容
所有评论(0)