vue后端返回文件流,前端实现Excel文件导出自定义文件名(新)
当后端返回文件流格式前端应该如何处理?如何将后端返回的文件流格式转换为Excel文件,并下载Excel文件?带着这些问题看文章,希望对你有所帮助!1. 应用场景2. 代码块分析3. 具体代码实现1.应用场景当后端返回的是文件流形式,前端应当如何处理?如何利用blob方法将文件流转换成正常的Excel文件格式?2.代码块分析downloadFileExcel(res, fileName) {//自定
·
当后端返回文件流格式前端应该如何处理?
如何将后端返回的文件流格式转换为Excel文件,并下载Excel文件?
带着这些问题看文章,希望对你有所帮助!
1. 应用场景
2. 代码块分析
3. 具体代码实现
1.应用场景
当后端返回的是文件流形式,前端应当如何处理?
如何利用blob方法将文件流转换成正常的Excel文件格式?
2.代码块分析
downloadFileExcel(res, fileName) {//自定义blob方法,导出Excel文件
let blob = new Blob([res.data]);
if (!fileName) {//如果后台返回文件名称
//注意一定要和后端协调好返回的数据格式,不然会出现中文乱码问题
fileName = res.headers['content-disposition'].split('filename=').pop();
}
if ('msSaveOrOpenBlob' in navigator) {
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
}
},
3.具体代码实现
getlist:function(){
var data={
username:_this.userName,startTime:_this.startTime,endTime:_this.endTime
}
_this.$axios.post(_this.httpAPI + 'slog/getExecl',data,{
headers: {'Content-Type': 'application/json','Authorization': _this.token},
responseType:"blob"//注意 需要规定后台返回文件流格式
}
).then(function(response){
if(response){
if(response.data.type==='application/json'){
//增加监听函数当接口返回错误信息或数据异常能正常捕获到
const reader=new FileReader();
reader.onload=function(){
const message=JSON.parse(reader.result);
this.$message.warning(message.msg)
}
reader.readAsText(res.data)
return false;
}
_this.downloadFile(response, '卷宗下载'+_this.DQTime+ '.xls');//自定义Excel文件名
}else{
_this.$message.error("服务端异常,Excel文件下载失败!");
}
});
}
downloadFile(res, fileName) {
let blob = new Blob([res.data]);
if (!fileName) {
fileName = res.headers['content-disposition'].split('filename=').pop();
}
if ('msSaveOrOpenBlob' in navigator) {
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
}
}
写在最后
如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏,毕竟原创不易;如果您觉得文章有什么地方写得不对或者需要改进的地方,欢迎通过评论私聊博主!
更多推荐
已为社区贡献1条内容
所有评论(0)