Springboot+poi无法使用ajax方法

ajax的方法无法访问后台,那是因为.ajax,.post 不支持返回二进制文件流的类型,dataType只支持xml,json,script,html这几种格式,没有blob类型。所以若要采用异步导出EXCEL的方式,只能选择使用原生Ajax XMLReques对象进行处理。

原生ajax异步请求参考文档:https://blog.csdn.net/swl979623074/article/details/77855629/

只需要修改前端代码即可。

var xhr ;
        if(window.XMLHttpRequest){//code for IE7+,Firefox,Chrome,Opera,Safari
            xhr = new XMLHttpRequest();
        }else{//code for IE6,IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var url = '../excel/inputExport?sort=osiInputdate&order=asc&conditions=' + conditions;
        //设置响应类型为blob类型
        xhr.responseType = "blob";
        xhr.open("post", url, true);
        xhr.onload = function () {
            if (this.status == "200") {
                //获取响应文件流  
                var blob = this.response;
                var reader = new FileReader();
                reader.readAsDataURL(blob);    // 转换为base64,可以直接放入a表情href
                reader.onload = function (e) {
                    // 转换完成,创建一个a标签用于下载
                    var a = document.createElement('a');
                    a.download = '办公用品.xls';
                    a.href = e.target.result;
                    $("body").append(a);    // 修复firefox中无法触发click
                    a.click();
                    $(a).remove();
                }
            }
        }

        xhr.send();

    }

Ajax下载文件的这种方式本来就是禁止的。出于安全因素的考虑,javascript是不能够保存文件到本地的,

所以ajax考虑到了这点,只是接受json,text,html,xml格式的返回值,二进制的返回格式就会抛出这个异常。

因为response原因,一般请求浏览器是会处理服务器输出的response,例如生成png、文件下载等,

然而ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的。

文件的下载是以二进制形式进行的,虽然可以读取到返回的response,但只是读取而已,是无法执行的,说白点就是js无法调用到浏览器的下载处理机制和程序。

解决方法:

1、用window.open() 或 window.location.href():

2、可以直接使用a标签实现文件下载:

<a href=”下载地址”>点击下载</a>

<pre name="code" class="has" style="margin: 0px; padding: 0px;"> var aLink = document.createElement('a'); aLink.download = "文件名"; aLink.href = "文件url地址"; document.body.appendChild(aLink); aLink.click(); document.body.removeChild(aLink);</pre>

3、可以使用jquery创建表单并提交实现文件下载:

<pre name="code" class="has" style="margin: 0px; padding: 0px;">var form = $("<form>"); form.attr("style","display:none"); form.attr("target",""); form.attr("method","post"); form.attr("action",rootPath + "T_academic_essay/DownloadZipFile.do"); var input1 = $("<input>"); input1.attr("type","hidden"); input1.attr("name","strZipPath"); input1.attr("value",strZipPath); $("body").append(form); form.append(input1); form.submit(); form.remove();</pre>

4、使用隐藏iframe或新窗体解决:

<pre name="code" class="has" style="margin: 0px; padding: 0px;">export const downloadFile = (url) => { const iframe = document.createElement("iframe"); iframe.style.display = "none"; // 防止影响页面 iframe.style.height = 0; // 防止影响页面 iframe.src = url; document.body.appendChild(iframe); // 这一行必须,iframe挂在到dom树上才会发请求 // 5分钟之后删除(onload方法对于下载链接不起作用,就先抠脚一下吧) setTimeout(()=>{ iframe.remove(); }, 5 * 60 * 1000); }</pre>

这个可以实现一次下载多个文件。

//第一种方式
    //window.location.href="/weixin/back/weixinGzuser/downFans";
    //第二种方式
    /*var aLink = document.createElement('a');
    aLink.download = "文件";
    aLink.href = "/weixin/back/weixinGzuser/downFans";
    document.body.appendChild(aLink);
    aLink.click(); document.body.removeChild(aLink);*/
    //第三种方式(post方法也可进行传值)
    var form = $("<form>");
    form.attr("style","display:none");
    form.attr("target","");
    form.attr("method","get");
    form.attr("action","/weixin/back/weixinGzuser/downFans");
    var input1 = $("<input>");
    input1.attr("type","hidden");
    input1.attr("name","test");
    input1.attr("value","test");
    $("body").append(form);
    form.append(input1);
    form.submit();
    form.remove();
//第四种自己测试啦~
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。