Vue文件下载：对请求异常的处理

最新推荐文章于 2025-04-11 14:26:37 发布

TongYuTian

最新推荐文章于 2025-04-11 14:26:37 发布

阅读量1.4k

点赞数 1

分类专栏：经验分享文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/m0_46204606/article/details/113548003

版权

经验分享专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种在Vue中处理文件下载过程中后端异常的方法。通过将arraybuffer类型的响应转换回原始格式，并检查其是否为对象来判断是否发生了错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue文件下载：对请求异常的处理

问题：post请求下载文件的Api的过程中被拦截处理为arraybuffer类型的数据，当后端抛出异常时，无法捕捉到，页面依然可以正常弹出下载文件窗口。

问题复现：接口正常 - 下载窗口被调起

在这里插入图片描述

但是这个时候Preview里后端返回下载异常

下载好的文件打开是乱码的情况

在这里插入图片描述

附上未做处理前的代码

let url = process.env.VUE_APP_BASE_API + `/order/down`;
let fileName = '文件名'

this.$axios.defaults.headers.common['token'] = window.sessionStorage.getItem('adminToken');
this.$axios.post(url,'参数', {
	responseType: "arraybuffer"
}).then((res) => {
    if (res.status == "200") {
		let blob = new Blob([res.data],{type:"application/vnd.ms-excel",});
		if (null != blob && blob.size > 0) {
			const aLink = document.createElement("a");
			aLink.href = URL.createObjectURL(blob);						aLink.setAttribute("download", fileName + ".xls"); // 设置下载文件名称
			aLink.click();
		} else {
			this.$alert("没有查询到数据哦", {
				callback: (action) => {},
			});
		}
	} else {
		this.$alert("无数据", {
			callback: (action) => {},
		});
	}
})

解决思路：先将拦截回来的arraybuffer类型的数据，重新转换为拦截前的数据，判断是否是对象，如果是对象说明是后端抛出异常；如果不是对象(文档流)就正常走下载的代码。

let url = process.env.VUE_APP_BASE_API + `/order/down`;
let fileName = '文件名'

this.$axios.defaults.headers.common['token'] = window.sessionStorage.getItem('adminToken');
this.$axios.post(url, this.search_Form, {
	responseType: "arraybuffer"
}).then((res) => {
	let content = res.data; //arraybuffer类型数据
	let resBlob = new Blob([content])
	let reader = new FileReader()
	reader.readAsText(resBlob, "utf-8")
	reader.onload = () => {
		if (reader.result.substr(0, 1) == '{' && reader.result) {
			let resU = JSON.parse(reader.result)
			this.$alert(resU.msg, {
				callback: (action) => {},
			});
		} else {
			if (res.status == "200") {
				let blob = new Blob([res.data], {type: "application/vnd.ms-excel",});
				if (null != blob && blob.size > 0) {
					const aLink = document.createElement("a");
					aLink.href = URL.createObjectURL(blob);
                    aLink.setAttribute("download", fileName + ".xls"); // 设置下载文件名称
					aLink.click();
				} else {
					this.$alert("没有查询到数据哦", {
						callback: (action) => {},
					});
				}
			} else {
				this.$alert("无数据", {
					callback: (action) => {},
				});
			}
		}
	}
})

整个流程就正常啦~