ajax是不能下載文件的,要麼用form,要麼用跳轉
function openExportTabs() { let exportUrl = "${webRoot}/report/totalityDataReportExport"; if (!$("input[name='startTime']").val() || !$("input[name='endTime']").val()) { alert("開始時間或者結束時間不能爲空!"); return; } let startTime = $("input[name='startTime']").val(); let endTime = $("input[name='endTime']").val(); let busiFlag=$("#busiFlag").val(); let url = exportUrl+"?startTime=" + startTime + "&endTime=" + endTime+"&busiFlag="+busiFlag; window.location.href=url; /* let result = ajaxUtil.get(url, ""); if (result == "error") { alert("操作出現異常"); return false; }*/ }
原因:
Ajax下載文件的這種方式本來就是禁止的。出於安全因素的考慮,javascript是不能夠保存文件到本地的,
所以ajax考慮到了這點,只是接受json,text,html,xml格式的返回值,二進制的返回格式就會拋出這個異常。
因爲response原因,一般請求瀏覽器是會處理服務器輸出的response,例如生成png、文件下載等,
然而ajax請求只是個“字符型”的請求,即請求的內容是以文本類型存放的。
文件的下載是以二進制形式進行的,雖然可以讀取到返回的response,但只是讀取而已,是無法執行的,說白點就是js無法調用到瀏覽器的下載處理機制和程序。
解決方法:
1、用window.open() 或 window.location.href():
2、可以直接使用a標籤實現文件下載:
<a href=”下載地址”>點擊下載</a>
或
var aLink = document.createElement('a');
aLink.download = "文件名";
aLink.href = "文件url地址";
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
3、可以使用jquery創建表單並提交實現文件下載:
var form = $("<form>");
form.attr("style","display:none");
form.attr("target","");
form.attr("method","post");
form.attr("action",rootPath + "T_academic_essay/DownloadZipFile.do");
var input1 = $("<input>");
input1.attr("type","hidden");
input1.attr("name","strZipPath");
input1.attr("value",strZipPath);
$("body").append(form);
form.append(input1);
form.submit();
form.remove();
4、使用隱藏iframe或新窗體解決:
export const downloadFile = (url) => {
const iframe = document.createElement("iframe");
iframe.style.display = "none"; // 防止影響頁面
iframe.style.height = 0; // 防止影響頁面
iframe.src = url;
document.body.appendChild(iframe); // 這一行必須,iframe掛在到dom樹上纔會發請求
// 5分鐘之後刪除(onload方法對於下載鏈接不起作用,就先摳腳一下吧)
setTimeout(()=>{
iframe.remove();
}, 5 * 60 * 1000);
}
這個可以實現一次下載多個文件。