一切照旧,直接切入主题。
现在假如工作中的您接到一个需求,需求内容是:前端提供时间输入框,点击“导出”按钮即可实现满足该段时间内的数据(实际数据来自于数据库)导出。
当然实现上述功能的方式有很多种,最简单也最常用的就是利用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"></i> 清空</button>
<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");