a标签下载⽂件header中带上⽤于鉴权的token 加了统⼀鉴权以后 如果把下载接⼝也拦截了 且前端使⽤的是a标签 可以⽤如下⽅法解决
替换调请求url和请求⽅式 , ⽅式⼀和⽅式⼆任意注释⼀个就可以运⾏了
⽅式1⽤的是原⽣的XmlHttpRequest ⽅式2⽤的是vue常⽤的axios
这两种⽅式都可以很⽅便的加⼊header
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="">
<head>
<meta charset="UTF-8">
<title>a标签触发ajax</title>
<script src="code.jquery/jquery-3.1.1.min.js"></script>
<script src="unpkg/axios/dist/axios.min.js"></script>
</head>
<body>
<a href="#" class="a_post">发起POST请求</a>
install python下载<script>
//⽅式1
$(".a_post").on("click",function(event){
event.preventDefault();//使a⾃带的⽅法失效,即⽆法调整到href中的URL
var url='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();
苹果手机如何下载网页视频if (this.status===200) {
var blob = sponse;
//adyState);
//AllResponseHeaders());
console.ResponseHeader("content-disposition"))
let temp = ResponseHeader("content-disposition").split(";")[1].split("filename=")[1];
var fileName = decodeURIComponent(temp);
//var hh = ResponseHeader("fileName");
/
/var fileName = sponse.headers["content-disposition"].split(";")[1].split("filename=")[1];
//console.log("fileName="+fileName)
//console.ResponseHeader("content-disposition"))
var reader = new FileReader();
console.log(e); //查看有没有接收到数据流
// 转换完成,创建⼀个a标签⽤于下载
var a = ateElement('a');
a.download=fileName+".xlsx"; //⾃定义下载⽂件名称
a.href = sult;
笔记本怎么结束进程快捷键
$("body").append(a); // 修复firefox中⽆法触发click
a.click();
//$(a).remove();
}
}
else{
alert("出现了未知的错误!");
}
}
});
//⽅式2
/
*$(".a_post").on("click",function(event){
/*$(".a_post").on("click",function(event){
event.preventDefault();//使a⾃带的⽅法失效,即⽆法调整到href中的URL
axios({
method: 'post',
url: "localhost:8050/file/export/snapEventVO",
responseType: 'blob'
}).then((res) => {
const link = ateElement('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];
angular数据双向绑定var fileName = decodeURIComponent(temp);
console.log(fileName)sql数据库与oracle数据库
link.style.display = 'none'
link.href = ateObjectURL(blob);
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
jquery下载文件请求veChild(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可以让前端获取
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论