1. 程式人生 > >解決ajax請求不能下載檔案

解決ajax請求不能下載檔案

我們在使用ajax請求去向服務端下載檔案時,我們通常從服務端拿到的只是一個字串,jquery自動的將檔案中的內容解析為字串傳給我們,此時,我們便不能再使用jquery的ajax請求來下載檔案


我們可以做如下操作來使用表單提交的方法來獲取下載檔案(推薦):

function downloadFile(){
    $("#exportForm").attr("action","/file/export");//改變表單的提交地址為下載的地址
    $("#exportForm").attr("method","post")
    $("#exportForm").submit();//提交表單
}

或者你的頁面沒有form表單,可以通過構造form表單來實現,使用後記得remove掉:

function downloadFile(){
    //構造表單
    var formHtml = '<form id="downForm" method="post" action="/file/export"></form>';
    //填充表單
    $("#downloadFormDiv").html(formHtml);
    //提交表單
    $("#downForm").submit();
    //移除表單
    $("#downloadFormDiv").html("");
}

或者你還可以通過如下請求直接去請求下載(會跳轉頁面,同時也會暴露引數,不推薦):

function downloadFile(){
    top.location.href = "/file/export"
}

再多說一句,我們在專案中有可能需要去先校驗檔案是否存在等一系列的校驗資訊,此時我們可以先在ajax傳送一個校驗請求先去校驗檔案是否存在,在使用(推薦的方法,form表單方式)來下載,就可以做到既有友好提示,又可以下載,提升使用者體驗;下面是一個例子:

/**
 * 下載檔案
 * @returns
 */
function downFile(){
	var msgInfoId = "";
	
	
	
	 
	 $.ajax({
        url: "/businessImportMsgInfo/checkDownFileExists",
        type: "POST",
        data: {type:type,msgInfoId:msgInfoId},
        beforeSend:function(){
        	//傳送前載入loading
        	showLoading();
        },
        success: function (data) {
        	if(data.statusCode == '200'){
        		//請求成功,下載檔案
        		$('<form action="/businessImportMsgInfo/downFile" method="post">'+
        				'<input type="hidden" name="msgInfoId" value="'+msgInfoId+'"/>'+
        				'<input type="hidden" name="type" value="'+type+'"/>'+
        			'</form>')
        			.appendTo('body').submit().remove();
        		
        	}else{
        		showErrorMessage(data.statusInfo)
        	}
        },
        complete: function(){
        	closeLoading();
        }
    });
}