前言
Ajax（XMLHttpRequest）不能直接访问下载接口。如果使用ajax,文件不能以附件的形式下载，ajax的返回值类型是json,text,html,xml类型，不能接收流类型，所以无法实现文件下载。我们可以使用XMLHttpRequest2。XMLHttpRequest2扩展了xhr，可以用来下载文件。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xhr2文件下载</title>
</head>
<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<body>
<input type="text" value="123412341234" id="reportId" style="display: none;"/>
<button type="button" class="btn btn-w-m btn-warning" onclick="saveFile()">下载</button>
<script type="text/javascript">
function saveFile() {
var reportId = $("#reportId").val();
console.log(reportId);
var self = this;
var xhr = new XMLHttpRequest();
xhr.open('GET', "dailyReportExcelAction/reportDataExport?reportId="+reportId ,true);
xhr.headers = "Content-type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
var data = new Blob([this.response],{
type: 'application/octet-stream;charset=UTF-8'
})
openDownloadDialog(data,"report.xls");
}
}
xhr.send();
}
function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
</script>
</body>
</html>效果：
你的赞和关注是对我最大的肯定，希望大家多多支持，谢谢大家。