比如excel文件
原理:主要是利用a标签
<a download="fdsfds" href="https://........./a.xls">测试</a>
方法1:
onDown() {
const dlink = document.createElement("a");
dlink.style.display = "none";
dlink.download = this.fileName; //如果前后端跨域,名字会不生效。
dlink.href = this.fileUrl;
document.body.appendChild(dlink);
dlink.click();
URL.revokeObjectURL(dlink.href); // 释放URL 对象
document.body.removeChild(dlink);
}
方法二:
window.open('https://s.........6.xls', '_blank')
方法三:
onDown(){
const url = this.fileUrl
this.loading = true //可以利用loading给提示或者禁止再次点击
const elt = document.createElement('a')
const fileName = this.fileName
elt.setAttribute('href', url)
elt.setAttribute('id', 'downloadLink')
elt.setAttribute('download', `fdfsd.xls`)
elt.style.display = 'none'
document.body.appendChild(elt)
elt.click()
// 删除添加的a链接
let downloadLink = document.getElementById('downloadLink')
document.body.removeChild(downloadLink)
this.loading = false
}
注意:如果是 通过后台获取的流文件blob,需要通过let objectUrl = URL.createObjectURL(blob) // 创建URL
// 利用a标签自定义下载文件名
const link = document.createElement('a')
axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => {
// 创建Blob对象,设置文件类型
let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
let objectUrl = URL.createObjectURL(blob) // 创建URL
link.href = objectUrl
link.download = 'xxx' // 自定义文件名
link.click() // 下载文件
URL.revokeObjectURL(objectUrl); // 释放内存
})