- 项目中需要实现二进制流文件下载,采用Blob方式
- 首先采用axios进行get请求. 代码如下:
import axios from 'axios'
const instant = axios.create({
withCredentials: true,
timeout: 600000,
})
instant.get(common.url + "good/download?goodId=" + this.id, {
headers: {
'Authorization': common.token
},
responseType: 'blob', //二进制流
}).then(response => {
console.log(response.data)
this.download()
}, err => {
console.log(err)
}).catch((error) => {
console.log(error)
})
注意: 提醒下这里headers中common.token 是登录cookie,大家可以根据下载需求不用关注. (同时设置的 timeout:600000, 这个值可以根据下载文件大小来设置,我的文件很大,如果设置时间短,遇到大文件就会出现下载超时,与服务器断开. )
- 然后是this.download这个方法实现:
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
let blob = new Blob([response.data], {
type: 'application/vnd.ms-excel'
})
window.navigator.msSaveOrOpenBlob(blob,
new Date().getTime() + '.zip')
} else {
/* 火狐谷歌的文件下载方式 */
var blob = new Blob([response.data])
var downloadElement = document.createElement('a')
var href = window.URL.createObjectURL(blob)
downloadElement.href = href
downloadElement.download = new Date().getTime() + '.zip'
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
window.URL.revokeObjectURL(href)
}
注意: 这里的 response.data 就是上面axios网络请求返回res值. 同时代码 window.navigator.msSaveOrOpenBlob(blob, new Date().getTime() + '.zip') 这里第二个参数,就是自己需要命名下载的文件. 这里用的时间值作为命名.
- 常见问题:
1. axios 网络下载超时,与服务器断开. 上面提到了,将timeout值设置大些。我在这里就是遇到此问题.
使用就这么简单,Vue项目出现问题,可以 进扣扣群交流:316567839