解决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();
        }
    });
}

猜你喜欢

转载自blog.csdn.net/k18381315803/article/details/84254553
今日推荐