本文记录一下在Vue中实现导出Excel表格的做法。参考度娘上各篇博客,最后实现功能
Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取。(前端也可以自己设置文件名)这其中遇到两个问题,第一是文件名获取不到;第二是返回的数据data已经被转成了Blob无法读取错误时后端反馈的信息
不多BB,上代码和解决方法:
第一步发送请求
1 Axios.request({ 2 method: 'GET', 3 url: `${baseUrl}/order/export`, //请求地址 4 responseType: 'blob', //responseType ->用来设置返回值,默认是'',等同于text,数据格式的转换是浏览器处理的 5 params: data, 6 timeout: 20000, 7 withCredentials: true, 8 })
第二步当请求发送以后接收后端返回的数据。
无论是成功时后端返回文档流还是失败返回一个对象,都会因为responseType: ‘blob’变成一个Blob对象。当后台解析错误的时候,返回的就是正常的错误对象,包含错误码和错误信息,如果不做处理,那么错误状态和成功状态都是blob类型,无法捕获;
所以需要对返回值做特殊处理,尝试把blob转换为json格式,如果转换成功则说明返回的数据不是文档流,后台出错,反之则文档转换正常:
Axios.request({
method: ‘GET’,
url: `${baseUrl}/order/export`,
responseType: ‘blob’,
params: data,
timeout: 20000,
withCredentials: true,
}).then((res) => {
//判断后端解析是否成功(成功:数据为文档流继续操作。失败:拿到错误信息,提示用户)
let data = res.data;
let fileReader = new FileReader();
fileReader.onload = function () {
try {
let jsonData = JSON.parse(this.result);
if (jsonData.result === “2”) {
// 说明是普通对象数据,且返回错误类型是2,直接将错误信息给用户看
// to do something
Message.error(jsonData.msg)
}
} catch (err) {
// 解析成对象失败,说明是正常的文件流
// alert(‘ok’);
}
};
fileReader.readAsText(data);
//成功继续处理后端返回的文档流数据
const link = document.createElement(‘a’)
let blob = new Blob([res.data], { type: ‘application/vnd.ms-excel’ });
link.style.display = ‘none’
link.href = URL.createObjectURL(blob);
// link.setAttribute(‘download’, ‘用户_’ + ‘.xlsx’) 前端自己设置下载的文件名称
//能获取到content-disposition信息,需要后端在后台接口中,在响应头中增加:context.Response.Headers.Add(“Access-Control-Expose-Headers”, “Content-Disposition”); 前端便能获取到
var fileName = res.headers[‘content-disposition’].split(“;”)[1].split(“filename=”)[1];
link.download = decodeURI(escape(fileName))
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
this.loading = !this.loading
}).catch(error => {
console.log(15, error)
})
}
}
在Vue中实现Excel文件导出大体如此,希望可以帮助到你哈。有不正之处,留言指点
参考博客:https://blog.csdn.net/dongguan_123/article/details/100183284
https://www.cnblogs.com/nanamiao/p/9407576.html
最新评论