1、第一种方式是前端直接使用超链接:
<a href="user/downloadExcel">下载文件</a>
2、另一种情况是点击文字调用方法,js动态创建a标签:
<div class="downFile" onclick="downloadFile()">点击下载</div>
function downloadFile(){
let a = document.createElement('a')
a.href = "user/downloadExcel"
a.click()
}
3、接口调用方法时:
function downloadFile(name){
axios({
method: 'get',
url: 'xxxx/xxx',
responseType: 'blob'
}).then(
response => {
let blob = new Blob([response.data])
if(window.navigator.msSaveOrOpenBlob){
navigator.msSaveBlob(blob,name)
}else{
let a = document.createElement('a')
a.href = window.URL.createObjectURL(blob)
a.download = name
document.body.appendChild(a)
a.click()
window.URL.revokeObjectURL(a.href)
document.body.removeChild(a)
}
},
error => {
//reject(error)
}
)
}
注意事项:返回response可能直接是流,如果项目中调用错误,查看是否有axios配置了公共拦截导致没有获取到流数据,可修改拦截方法;如果下载成功,但是里面内容错误,有可能是response.data层级错误,测试是否去掉.data或加一层.data查看是否正常下载。