前端Vue利用Axios POST方式代替window.location.href的GET方式下载文件
var params = {}
let url = "";
let data = params;
axios.request({
url:url,
headers:{
"Content-Type": "application/json",//重要
"accept": "application/octet-stream",//重要
//....自定义header
},
method:"POST",
data:data,
params:data,
responseType: 'blob'//重要
}).then(function (response) {
var data=response.data;
var xhr=response.request;
var headers = xhr.getAllResponseHeaders();//查看一下响应headers中的属性
var contentDisposition = xhr.getResponseHeader("Content-Disposition");//重要
var url = URL.createObjectURL(data);//重要
var fileName = decodeURI( contentDisposition.split("filename=")[1].split(";filename*=")[0])
let link = document.createElement('a');
link.href = url;
link.download = fileName;//重要--决定下载文件名
link.click();
link.remove();
}).catch(function (error) {})
写在后面,如果代码无法获取响应headers的Content-Disposition属性,但是浏览器又可以看到的话,只是浏览器安全协议屏蔽了,需要在服务端设置暴露出来这个属性即可。
服务端添加如下代码:
header('Access-Control-Expose-Headers:Content-Disposition');或
Access-Control-Expose-Headers: Content-Disposition
为了获取response header中的文件名。