浏览器下载blob文件流(兼容IE浏览器和其他主流浏览器)

在vue项目中，一般会使用axios做ajax请求，此时会封装响应拦截器，一般约定 response.data.code === '000000' 时响应通过，但是在服务端返回文件流时，是没有 response.data.code 的值，此时响应就会被拦截，考虑使用其他字段进行响应成功的判断，经过检查发现，在文件流下载需求中，会有对象的响应类型response.data.type，我们的需求中是下载excel文件，使用的文件类型是 application/vnd.ms-excel(IE浏览器上是 application/vnd.ms-excel;charset=utf8,其他主流浏览器中是 application/vnd.ms-excel)，所以拦截器里面判断

if(response.data.code == '000000' || response.data.type.indexOf('application/vnd.ms-excel') > -1) {
	// 响应成功时候的操作
}else {
	// 响应不成功时候的操作
}

以上是对axios响应拦截器封装的修改

在业务操作中，因为ie浏览器有独立于其他浏览器的下载文件方式，所以要做如下判断

axios({
	url: *****download,
	responseType: "blob",
    method: "post",
    data: {
    	// 自己业务的参数
    },
}).then((res) => {
	// 如果有res，代表服务端正常返回了文件流
	if(res) {
		//拆解获取文件名，
		let let _filename = res.headers["content-disposition"].split(";")[1].split("=")[1]; 
		if('msSaveOrOpenBlob' in navigator) {
			//ie使用的下载方式
			window.navigator.msSaveOrOpenBlob(res.data, decodeURI(_filename));
		}else {
			// 其他浏览器的下载方式
			// 创建一个隐藏的 a 标签
			const link = document.createElement("a");
			// let blob = new Blob([res.data],{ type: "application/vnd.ms-excel"}); // 文件流处理
			let blob = new Blob([res.data], {
				type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
			}); // 文件流处理
			link.style.display = "none"; // 去掉 a 标签的样式
			// 设置链接
			link.href = URL.createObjectURL(blob);
			link.download = decodeURI(_filename);
			document.body.appendChild(link);
			// 模拟点击事件
			link.click();
			// 移除创建的 a 标签
			window.URL.revokeObjectURL(link.href);
			document.body.removeChild(link);
		}
	}
})

这篇好文章是转载于：学新通技术网