a标签下载文件header中带上用于鉴权的token
加了统一鉴权以后 如果把下载接口也拦截了 且前端使用的是a标签 可以用如下方法解决替换调请求url和请求方式 ， 方式一和方式二任意注释一个就可以运行了方式1用的是原生的XmlHttpRequest 方式2用的是vue常用的axios这两种方式都可以很方便的加入header<!DOCTYPE html><html lang="zh-CN" xmln...
·
加了统一鉴权以后 如果把下载接口也拦截了 且前端使用的是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可以让前端获取
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)