vue axios根据文件流 导出excel表并处理服务端异常状况
需求:导出记录列表 excel描述:后端POST接口请求返回文件流,前端处理文件流转换成下载地址并下载状况:下载可能会超时或者登录失效,需要处理后端返回来的json 数据download(url, params) {axios({headers: {'Content-Type': 'application/x-www-form-urlencoded'},method: 'post',url: ur
·
需求:导出记录列表 excel
描述:后端POST接口请求返回文件流,前端处理文件流转换成下载地址并下载
状况:下载可能会超时或者登录失效,需要处理后端返回来的json 数据
download(url, params) {
axios({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'post',
url: url,
timeout: 60 * 10 * 1000, // 单独设置超时时间 导出记录太多的话会很慢 防止超时
data: Qs.stringify(params),
responseType: 'blob' // 二进制流文件,一定要设置成blob,默认是json
}).then((res) => {
const data = res.data
let blob = new Blob([data],{type: 'application/vnd.ms-excel'}); // 文件格式设置
const r = new FileReader()
r.readAsText(blob) // FileReader的API 必须为readAsText
r.onload = function(e) {
try {
const resData = JSON.parse(this.result) // this.result为FileReader获取blob数据转换为json后的数据,即后台返回的原始数据 这里获取成功 说明下载出错了
//以下进行后续处理 根据自己需求修改
if(resData.code == -2) { // 这里后台给我返回code=2 代表 登录过期了
window.localStorage.clear();
window.sessionStorage.clear();
ElementUI.Message({
message: "登录失效",
type: "warning",
});
router.push({
name: 'login'
});
return false;
}
if(resData.code == -1) { // 这里后台给我返回code=1 代表 服务端报错了
window.localStorage.clear();
window.sessionStorage.clear();
ElementUI.Message({
message: "服务器内部发生错误了",
type: "warning",
});
router.push({
name: 'login'
});
return false;
}
} catch(err) {
// 下面是正常处理 返回的是文件流
let fileName = params.excelFileName // 文件名
// 兼容ie11
if(window.navigator.msSaveOrOpenBlob) {
try {
const blobObject = new Blob([data])
window.navigator.msSaveOrOpenBlob(blobObject, fileName+ ".xlsx") // 记得加文件名 和 文件扩展名
} catch(e) {
console.log(e)
}
return
}
// a标签实现下载
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName+ ".xlsx")
document.body.appendChild(link)
link.click()
}
}
}).catch(res => {
// ...
})
},
更多推荐
已为社区贡献2条内容
所有评论(0)