Vue中axios实现文件流下载,并监听下载进度
axios实现文件流下载,并监听下载进度
·
axios发送请求 post或get
/**
* post请求下载
*/
postDown(){
// post||get
axios.post(
url,
data, // body
{
responseType:'blob',
onDownloadProgress:function(event){ // 下载进度监听
if(event.loaded===event.total){
// 下载完成 loading = true
}
}
}
).then(res=> {
if(res.status===200){
var fileName = res.headers['filename']// 需要后台返了filename
var suffix = 'zip'
if(fileName){
var arr =fileName.split('.')
suffix = arr[arr.length-1]
}
var content = res.data
if(content.size<1){
// 文件不存在
this.$message({type:'info',message:'文件不存在'})
return
}
var blob = new Blob([content])
fileName = 'timestamp.'+suffix
this.downFile(null, blob, fileName)
}
}).catch(error=>{
console.log(error)
})
},
生成a标签执行下载
/**
* 生成下载标签,执行下载
*/
downFile(url, blob, fileName){
var aTag = document.createElement('a')
if(url){
aTag.href = url
}
if(blob){
aTag.href = URL.createObjectURL(blob)
}
if(fileName){
aTag.download = fileName
}
aTag.click()
URL.revokeObjectURL(aTag.href)
}
更多推荐
已为社区贡献2条内容
所有评论(0)