实现文件下载请等待提示

Posted 2020-08-22

ajax实现下载等待

该方法先发一个请求到后台去生成Excel，并把生成的Excel文件保存在服务器上的临时文件夹。然后通过ajax返回Excel文件在服务器上的路径或者文件标记。ajax客户端收到服务器返回的结果，再通过iframe或者form发起请求去下载Excel文件。这个方法需要客户端发两次请求到后台，第一次是请求后台生成Excel文件，第二次是请求下载Excel文件。 这个方法不存在任何兼容性以及限制，推荐使用。

<script type="text/javascript" src=\‘#\‘" /js/jquery.blockUI.js" encode="false"/>"></script>

 <a href="#" class="w120" onclick="form_download(‘<s:url value="/mng_usr!download" />‘); return false;">下载</a>

function form_download(url) {
    if (window.confirm(‘确定下载吗？‘)) {
    var imgUrl="http://localhost:8080/admin/images/indicator.gif";
    $.blockUI({
            message: ‘<div><img src="‘+imgUrl+‘" style="margin-right:5px;"  />データ取得中…</div>‘,
            css: {
                padding:‘25px‘
            }
        });
    var form = $("<form name=‘formDownload‘ id=‘formDownload‘></form>"); 
    form.attr(‘method‘, ‘post‘);
    form.attr(‘action‘, url);
    $(‘body‘).append(form); 
    form.submit();
    $.ajax({
    url:url,
    cache:false,
    data:{},
    dataType : "json",
    contentType : "application/json:charset=utf-8",
    success:function (data){
    $.unblockUI();
    },
    error:function(e){
    $.unblockUI();
    }
    }); 
    }
}

iframe实现下载等待

用iframe实现下载等待的原理是把下载的路径给iframe的src，然后监听iframe的onload事件，当后台处理完成并返回文件时，会触发iframe的onload事件。使用该方法有两个问题：

参数通过url传递，如果url长度超过2048会被浏览器截断。

iframe的onload事件在ie浏览器下触发不符合要求。

 参考：

http://blog.csdn.net/accountwcx/article/details/46728563

1. 使用ajax，ajax的返回值类型是json,text,html,xml类型，或者可以说ajax的发送，接受都只能是string字符串，不能流类型，所以无法实现文件下载，强用会出现response冲突。如果非要使用ajax的话，只能通过返回值得到生成的文件相关url。然后在回调函数里通过创建一个iframe，并设置其src值为文件url，或者一个对文件生成流的处理url，这样操作来实现文件下载且页面无刷新。

有参数传递的情况

var title=$("input[name=‘gjzSelect‘]").val();
var rqTime = $(".ui-datepicker-time").val();
var ddd= rqTime.split("一");
var startTime=ddd[];
var endTime=ddd[];
var form = $("<form></form>"); //定义一个form表单
form.attr(‘style‘, ‘display:none‘); //在form表单中添加查询参数
form.attr(‘target‘, ‘‘);
form.attr(‘method‘, ‘post‘);
form.attr(‘action‘, "<%=basePath%>jiankong/madeExcel.do");
var input = $(‘<input>‘);
input.attr(‘type‘, ‘hidden‘);
input.attr(‘name‘, ‘startTime‘);
input.attr(‘value‘, startTime);
var input = $(‘<input>‘);
input.attr(‘type‘, ‘hidden‘);
input.attr(‘name‘, ‘endTime‘);
input.attr(‘value‘, endTime);
var input = $(‘<input>‘);
input.attr(‘type‘, ‘hidden‘);
input.attr(‘name‘, ‘title‘);
input.attr(‘value‘, title);
$(‘body‘).append(form); //将表单放置在web中
form.append(input); //将查询参数控件提交到表单上
form.append(input);
form.append(input);
form.submit();
<%-- 
$.ajax({
url:‘<%=basePath%>jiankong/madeExcel.do‘,
cache:false,
data:{
‘startTime‘:startTime,
‘endTime‘:endTime,
‘title‘ :title
},
error:function (e){
alert("导出失败！");
},
success:function (data){
alert("导出成功！");
} 
}); 
--%>

本文出自 “10916470” 博客，请务必保留此出处http://10926470.blog.51cto.com/10916470/1881817