原理
<a href="url" download="文件名.后缀名">
复制代码
实际使用场景
上面的原理中适合开放的资源下载,http请求中无需验证时使用。在实际使用过程中,a标签中的url中直接设置header比较麻烦且不安全, 而且从开发规范上api一般上要封装一下(header中需要一些特定设置),放到统一的文件。
解决办法:下载相关和api responseType设置为blob(!!!重要),在以blob形式获取到文件之后js创建一个a标签,设置url和downlaod后并触发,最后释放url资源并删除创建的a标签
api:
downloadFile (url) => {
axios.get(url, {
params: {
},
headers: {
},
// 重要
responseType: 'blob'
})
}
html:
<button @click="download">下载</button>
js:
function downlaod (param){
api.downloadFile(param).then(data => {
if (!data) {
this.$Message.error('下载内容为空')
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', etcdCluster + '.zip')
document.body.appendChild(link)
link.click()
//释放URL对象所占资源
window.URL.revokeObjectURL(url)
//用完即删
document.body.removeChild(link)
}).catch(err => {
console.log('err: ', err)
})
}
复制代码
MDN相关链接
developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/…