get请求方式
var downURL = '下载接口'
var getData = '?starTime=20180922&endTime=20180925'
var request = downURL+getData
window.open(request)
或者是用a标签,herf属性指向下载的地址。比较简单。直接下载。
post请求方式。
第一步:让后端将下载的接口的response heade
r设置:
Content-disposition: attachment; filename=数据报表.xlsx(表示会直接下载文件,文件名为‘数据报表’)
Content-Type:application/octet-stream (二进制流数据,如常见的文件下载)
第二步:修改axios请求的responseType
为arraybuffer
,以post请求为例:
axios({
method: 'post',
url: '/api/main/manage/memberLogAttendance/findPage',
responseType: 'arraybuffer',
data: para,
headers: {
token: this.token
}
}).then(res => {
console.log('111')
this.download(res.data) // 注意,这里一定是res.data,不然导出的excel会乱码
console.log(err)
})
download(data) {
if (!data) {
return
}
const url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '考勤统计.xlsx')
document.body.appendChild(link)
link.click()
URL.revokeObjectURL(link.href) // 释放URL 对象
document.body.removeChild(link)
link = null
},
遇到的问题解决办法
1、 下载的excel乱码
问题,res返回的数据,需要取res.data
再去new Blob
,乱码原因就是这个。
2、我的axios
请求,使用了全局的拦截器,本来是通过res.success
来判断接口有没有请求成功,但是,这里就需要对流数据接口进行排除,流并没有返回这个res.success,不再是json
数据格式,所以可以通过响应头的content-type
来进行判断排除,这也就可以继续使用统一的拦截器。
service.interceptors.response.use(
// response => response,// 如果需要返回http信息譬如头部信息或状态,就使用该方式
response => {
const res = response.data
// 如果是请求的流数据,直接返回res去处理,res.success为undifiend
if (response.headers['content-type'] === 'application/octet-stream') {
return res
}
// 如果返回后端定义的code不是 1 ,就视为一个错误返回.
if (res.success !== 1) {
Message({
message: res.errMsg || 'Error',
type: 'error',
duration: 5 * 1000
})
if (res.errCode === 'err.token.outtime') { // token超时
store.dispatch('user/resetToken').then(() => {
location.reload()
})
}
return Promise.reject(res || 'Error')
} else {
return res
}
},
参考地址:
https://my.oschina.net/u/3964830/blog/2222103