Axios 接收导出文件流
请求时,用blob格式去接收,设置responseType: ‘blob’标题在接口返回错误时,需要将接收到的 blob 转为 json 做错误提示接口请求export function exportFile(queryInfo) {return http({url: 'xxx',method: 'get',params: queryInfo,headers: {'Content-Type': '
·
请求时,用blob格式去接收,设置responseType: ‘blob’
在接口返回错误时,需要将接收到的 blob 转为 json 做错误提示
接口请求
export function exportFile(queryInfo) {
return http({
url: 'xxx',
method: 'get',
params: queryInfo,
headers: {
'Content-Type': 'application/octet-stream'
},
responseType: 'blob' // 这个是重点哈!!!!
})
}
BLOB 转 JSON 方法
// BLOB => JSON
function blobToJson (blob) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsText(blob, 'utf-8')
reader.onload = () => {
resolve(reader.result)
}
reader.onerror = err => {
reject(err)
}
})
}
AXIOS 拦截器
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API || '',
timeout: 60000 // 超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
return config
},
error => {
// ....
}
)
// response拦截器
service.interceptors.response.use(
async response => {
const { status, config } = response
// 默认正常情况
if(status === 200) {
// blob格式返回 => 错误处理
if (config.responseType === 'blob') {
const result = await blobToJson(response.data)
// 可以被parse为错误信息,不可以被parse为文件流形式
// 错误信息: { result: -1, description: 'fail' }
try {
response.data = JSON.parse(result);
} catch (err) {
return response.data
}
} else { // ... }
},
error => {
// ....
}
)
export default service
VUE文件中使用
handleExport () {
const res = await exportFile({
startTime: '2020-10-12 00:00:00',
endTime: '2021-10-12 23:59:59'
})
// 存在result,则默认为接口返回错误信息
// 文件流中不存在result字段
if (!res.result) {
const data = new Blob([res], {
type: 'application/vnd.ms-excel'
})
let blobUrl = window.URL.createObjectURL(data)
this.handleDownloadFile(blobUrl)
}
}
handleDownloadFile (url) {
const a = document.createElement('a')
a.href = url
a.download = `${new Date().getTime()}.xlsx`
a.click()
}
更多推荐
已为社区贡献1条内容
所有评论(0)