使用button代替a标签实现文件下载
文件下载方法
如果从后台服务中可以获取文件的下载url,那么在页面中要实现文件下载,直接使用<a>
标签
<a href="url">文件下载</a>
但是这种方法下载的文件名称是一串字符串,并不是文件本身的名字。为了实现所下载的文件其名字是它本身的文件名,下面介绍一种使用<button>
的方法
使用axios获取blob
async downLoadByUrl(url) {
const res = await axios({ url, responseType: 'blob' })
return res.data
}
创建URL对象并点击a
标签
export async function downloadFile(url, name, aElement, that) {
let downloadUrl = null
const blob = await that.downLoadByUrl(url)
const URL = window.URL || window.webkitURL
downloadUrl && URL.revokeObjectURL(downloadUrl)
downloadUrl = URL.createObjectURL(blob)
aElement.download = name
aElement.href = downloadUrl
aElement.click()
aElement = null
}
button
点击事件触发
async download(url, name) {
const a = document.createElement('a')
downloadFile(url, name, a, this)
}