ajax请求不能下载文件

一切照旧，直接切入主题。

现在假如工作中的您接到一个需求，需求内容是：前端提供时间输入框，点击“导出”按钮即可实现满足该段时间内的数据(实际数据来自于数据库)导出。

当然实现上述功能的方式有很多种，最简单也最常用的就是利用form表单实现。

代码如下：HTML代码

<form action="${doadmin}/kvop/order/mailVbsBillQuerySaveData.html" method="post" class="form form-horizontal" id="form">
	<div class="row cl">
		<label style="margin-top:13px" class="form-label col-xs-1 col-sm-1">推送时间:
        </label>
	<div style="margin-top:10px" class="formControls col-xs-3 col-sm-3">
		<input type="text" onfocus="WdatePicker()" id="startDate" name="startDate" 
                 class="input-text Wdate" style="width:120px;"> -
		<input type="text" onfocus="WdatePicker()" id="endDate" name="endDate" 
                 class="input-text Wdate" style="width:120px;">
	</div>

	<div class="row cl text-c">
		<button type="reset" class="btn btn-secondary radius"><i class="Hui-
                 iconfont">&#xe6e2;</i> 清空</button> &nbsp;&nbsp;&nbsp;
		<button type="button" class="btn btn-success radius" onclick="gotoPage()">导出
        </button>
	</div>
	</div>
</form>

JS代码：

function gotoPage() {
	var startDate = $.trim($("#startDate").val()); //审核时间起
	var endDate = $.trim($("#endDate").val()); //审核时间止
	if (startDate == '' || startDate == undefined || startDate == null) {
	   layer.msg('请输入开始时间!', {icon: 2,time: 3000});
	   return false;
	}
	if (endDate == '' || endDate == undefined || endDate == null) {
	   layer.msg('请输入结束时间!', {icon: 2,time: 3000});
	   return false;
	}
	document.getElementById("form").submit();
}

但是作为年少的我，第一时间选择使用的是Ajax进行提交发起下载功能。

我分别测试了很多种方式：

1、通过流来进行导出。2、通过excel进行导出。3、通过从FTP读取文件进行导出。

最后的结果是：失败。

现象是：每次点击“导出”按钮的时候，报错:调用接口异常。

然后脑中一闪过一个想法：是不是ajax不支持文件下载呢？

然后我上网查阅，结果真的符合我的这个想法。

Why?

ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行，虽然可以读取到返回的response，但只是读取，无法执行。也就是说js无法调用到浏览器的下载处理机制和程序。

福利内容

在下载的时候，直接使用中文的文明名称会下载的时候，会出现中文名称消失或者乱码，可以使用下面的方式进行解决

response.setHeader("Content-Disposition", "attachment;filename="+ java.net.URLEncoder.encode("逾期的订单数据", "UTF-8")+".xls");

ajax请求不能下载文件

猜你喜欢