添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

参考: http://yuwenlin.iteye.com/blog/2275289

1.Ajax请求导出Excel的问题描述:

前端发起Ajax请求get或post,后台使用Poi生成excel文件,最后用response输出excel文件流。整个调用过程都没有报任何错,excel文件也生成在本地,但浏览器没有弹出文件下载,毫无反应。

2.解决:

开始一直以为是浏览器兼容性,或后台输出文件流代码有问题,调了半天,也都一样,不报任何错。后来上网搜发现在类似的问题,Ajax导出excel没反应,网上有人说不能使用ajax,换成地址重定向 window.location.href 就行,一换还真好使。

function() {
    var stime = $("#layerdate").val();
    var etime = $("#layerdate2").val();
    window.location.href = "${pageContext.request.contextPath}/user/export?stime="+stime+"&etime="+etime;

  但是当需要传一个很大数据到后台(window.location.href= actionUrl + "?" + data;),就会出问题了,当然,当数据量不大的时候,使用这种方式是极好的。导致这个问题的原因是各种浏览器对URL解析的长度限制是不同的。

  • Microsoft Internet Explorer (Browser):IE浏览器对URL的最大限制为2083个字符,如果超过这个数字,提交按钮没有任何反应。
  • Firefox (Browser):对于Firefox浏览器URL的长度限制为65,536个字符
  • Safari (Browser):URL最大长度限制为 80,000个字符。
  • Opera (Browser):URL最大长度限制为190,000个字符。
  • Google (chrome):url最大长度限制为8182个字符
  •   解决方法就换成了使用隐藏form来执行导出操作,如下:

    <a href="javascript:void(0)" onclick="exportExcel()">导出1</a>
    // 导出,使用这种方式 可以,使用 ajax请求不可以 导出excel
    function exportExcel(){
         var form = $("<form>");
         form.attr('style', '');
         form.attr('target', '');
         form.attr('method', 'post');
         form.attr('action', '${pageContext.request.contextPath}/user/export');
         var input1 = $('<input>');
         input1.attr('type', 'hidden');
         input1.attr('name', 'item');
         input1.attr('value', 'test');      /* JSON.stringify($.serializeObject($('#searchForm'))) */
         $('body').append(form);
         form.append(input1);
         form.submit();
         form.remove();    
    

    3.总结:

      导出excel为什么不能用ajax请求?

      因为导出excel,实际上是文件下载,后台需要往前端(浏览器)写文件流的。而Ajax请求获取数据都是“字符串”,整个交互传输用的都是字符串数据,它没法解析后台返回的文件流,但浏览器可以。

    4.Ajax与Form表单提交的区别:

      Ajax提交不会自动刷新页面,需要手动处理。

      Form表单提交在数据提交后会刷新页面,如果是Post提交,点击刷新浏览器会提示 是否再次提交。