ajax下載文件的坑

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);
}

這個可以實現一次下載多個文件。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章