a标签下载文件header中带上用于鉴权的token

加了统一鉴权以后如果把下载接口也拦截了且前端使用的是a标签可以用如下方法解决替换调请求url和请求方式，方式一和方式二任意注释一个就可以运行了方式1用的是原生的XmlHttpRequest 方式2用的是vue常用的axios这两种方式都可以很方便的加入header<!DOCTYPE html><html lang="zh-CN" xmln...

m0_37149617

30667人浏览 · 2019-09-17 17:40:34

m0_37149617 · 2019-09-17 17:40:34 发布

加了统一鉴权以后如果把下载接口也拦截了且前端使用的是a标签可以用如下方法解决

替换调请求url和请求方式，方式一和方式二任意注释一个就可以运行了

方式1用的是原生的XmlHttpRequest 方式2用的是vue常用的axios

这两种方式都可以很方便的加入header


<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>a标签触发ajax</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	<a href="#" class="a_post">发起POST请求</a>
	 <script> 
        //方式1
		$(".a_post").on("click",function(event){
		event.preventDefault();//使a自带的方法失效，即无法调整到href中的URL
		var url='http://localhost:8050/file/export/snapEventVO';   //请求的URl
			var xhr = new XMLHttpRequest();		//定义http请求对象
			xhr.open("POST", url, true);		
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xhr.send();
			xhr.responseType = "blob";  // 返回类型blob
			xhr.onload = function() {   // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
				if (this.status===200) {
					var blob = this.response;
					//alert(this.readyState);
					//alert(xhr.getAllResponseHeaders());
					console.log(xhr.getResponseHeader("content-disposition"))
					let temp = xhr.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1];
					var fileName = decodeURIComponent(temp);
					//var hh = xhh.getResponseHeader("fileName");
				
					//var fileName = this.response.headers["content-disposition"].split(";")[1].split("filename=")[1];
					//console.log("fileName="+fileName)
					//console.log(xhr.getResponseHeader("content-disposition"))
					var reader = new FileReader();
					reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a标签href
					reader.onload=function (e) {
						console.log(e);			//查看有没有接收到数据流
						// 转换完成，创建一个a标签用于下载
						var a = document.createElement('a');
						a.download=fileName+".xlsx";			//自定义下载文件名称
						a.href = e.target.result;
						$("body").append(a);    // 修复firefox中无法触发click
						a.click();
						//$(a).remove();
					}
				}
				else{
					alert("出现了未知的错误!");
				}
			}
		});

        //方式2
		/*$(".a_post").on("click",function(event){
			event.preventDefault();//使a自带的方法失效，即无法调整到href中的URL
			axios({
				method: 'post',
				url: "http://localhost:8050/file/export/snapEventVO",
				responseType: 'blob'
			}).then((res) => {
				const link = document.createElement('a')
				let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
			//获取heads中的filename文件名
			var aa = res.headers["content-disposition"]
			let temp = res.headers["content-disposition"].split(";")[1].split("filename=")[1];
			var fileName = decodeURIComponent(temp);
			console.log(fileName)
			link.style.display = 'none'
			link.href = URL.createObjectURL(blob);
			link.setAttribute('download', fileName)
			document.body.appendChild(link)
			link.click()
			document.body.removeChild(link)
		}).catch(error => {
				console.log(error)
			})
		});
*/




	 </script>

</body>

注意如果涉及跨域问题是无法直接拿到content-disposition中的fileName的

需要在服务端添加Access-Control-Expose-Headers指定允许访问的header

java代码如下其他语言同理


response.setHeader("Access-Control-Expose-Headers","Content-Disposition");//指定Content-Disposition可以让前端获取

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^