ajax嵌套ajax下载excel文件之问题解决

最新推荐文章于 2023-12-09 22:51:31 发布

置顶阿尔法小师妹

最新推荐文章于 2023-12-09 22:51:31 发布

阅读量945

点赞数 1

分类专栏： java高级文章标签： ajax下载文件方案

本文链接：https://blog.csdn.net/weixin_41926301/article/details/97146969

版权

java高级专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、场景介绍

按照模版导入excel文件，把符合规则的数据更新后，把异常数据导出excel，并记录导出原因。导入导出需要一键操作！！！

二、设计过程

用ajax上传文件，ajax上传成功后，在ajax的success中嵌套ajax实现文件的下载。

前端代码如下：

<div id="excelUpForm" class="jd_hide">
   <form id="excelUpBD"  method="post" enctype="multipart/form-data">
        <div>
             <input name="file" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
        </div>
   </form>
</div>

<script>
    function () {
        var formData = new FormData($('#excelUpBD')[0]);
        if($('#excelUpBD')[0].elements[0].value.length == 0 || $('#excelUpBD')[0].elements[0].value == ""){
            alert("请选择文件");
            return;
        }
        $.ajax({
            url:"/rest/test/excelUpload",
            data: formData,
            type:"POST",
            dataType:'json',
            cache: false,
            processData: false,
            contentType: false,
            async : false
        }).done(function (result) {
            if (result.sucess){
                confirm(result.msg);
                location.reload();
                $.ajax({
                    url:"/rest/test/export",
                    data: JSON.stringify(result.data),
                    type:"POST",
                    dataType:'json',
                    cache: false,
                    processData: false,
                    contentType: 'application/json;charset=UTF-8',
                    async : false
                }).done(function () {

                })
            }else {
                confirm(result.msg);
                location.reload();
            }

        })
    }
</script>

后台代码操作结果正常，但是导出的excel并没有在页面显示，这是为什么呢？？？

因为excel的导出流是二进制流，而ajax的输出为dataType类型如下：

类型	解释
”xml”	返回 XML 文档，可用 jQuery 处理
”html”	返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行
”script”	返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
”json”	返回 JSON 数据
”jsonp”	JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
”text”	返回纯文本字符串

dataType的输出类型中没有二进制流，所以导出excel输出的二进制流无法转出为字符串，从而excel导出无响应。

那么，证明了一点：ajax不可以导出或下载文件。

在一键导入excel并导出excel的文件很大的时候，怎样解决这个问题呢？

显然用ajax导入文件，用ajax返回要导出的大量数据，这样导出数据的传递是很方便的，文件的导出怎样实现？我们可以用ajax的底层代码实现,即用XMLHttpRequest，XMLHttpRequest可以实现ajax的功能，有可以设置返回值得类型

responseType = 'blob'

设置返回值为blob：二进制大对象类型，从而实现ajax导出文件的功能。代码如下：

<div id="excelUpForm" class="jd_hide">
   <form id="excelUpBD"  method="post" enctype="multipart/form-data">
        <div>
             <input name="file" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
        </div>
   </form>
</div>


<script>
    function () {
        var formData = new FormData($('#excelUpBD')[0]);
        if($('#excelUpBD')[0].elements[0].value.length == 0 || $('#excelUpBD')[0].elements[0].value == ""){
            alert("请选择文件");
            return;
        }
        $.ajax({
            url:"/rest/test/excelUpload",
            data: formData,
            type:"POST",
            dataType:'json',
            cache: false,
            processData: false,
            contentType: false,
            async : false
        }).done(function (result) {
            if (result.sucess){
                confirm(result.msg);
                location.reload();
                var xhr = new XMLHttpRequest();
                xhr.open('post', '/rest/test/export', true);
                xhr.responseType = 'blob';
                xhr.setRequestHeader('Content-Type','application/json;charset=utf-8');
                xhr.send(JSON.stringify(result.data));
                xhr.onload = function () {
                if (this.status == 200) {
                    var blob = this.response;
                    //文件后缀名
                    var d=new Date(),str='';
                    str +=d.getFullYear()+'年'; //获取当前年份
                    str +=d.getMonth()+1+'月'; //获取当前月份（0——11）
                    str +=d.getDate()+'日';
                    str +=d.getHours()+'时';
                    str +=d.getMinutes()+'分';
                    str +=d.getSeconds()+'秒';
                    transferDownload(blob,"test_"+str+".xls");
                }
               }
               function transferDownload(blob, filename) {
                 // 创建隐藏的可下载链接
                 var yLink = document.createElement('a');
                 yLink.download = filename;
                 yLink.style.display = 'none';
                 // 字符内容转变成blob地址
                 yLink.href = URL.createObjectURL(blob);
                 // 触发点击
                 document.body.appendChild(yLink);
                 yLink.click();
                 // 然后移除
                 document.body.removeChild(yLink);
                }
    
            }else {
                confirm(result.msg);
                location.reload();
            }

        })
    }
</script>

perfect!!问题解决了！！！excel正常导出。

三、借助第三方平台来下载文件

在上述解决办法之外，还有一种解决思路，是在文件上传成功后，把过滤出来的数据转化为excel的HSSFWorkbook，再转化为

InputStream、再转化为File文件上传文件到某个平台A上，返回平台A上文件存储的链接，直接用链接打开。这样实现文件的上传在本地，文件的下载在第三方平台上，不会出现ajax返回文件流格式的不匹配。实现如下：

<div id="excelUpForm" class="jd_hide">
   <form id="excelUpBD"  method="post" enctype="multipart/form-data">
        <div>
             <input name="file" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
        </div>
   </form>
</div>

<script>
    function () {
        var formData = new FormData($('#excelUpBD')[0]);
        if($('#excelUpBD')[0].elements[0].value.length == 0 || $('#excelUpBD')[0].elements[0].value == ""){
            alert("请选择文件");
            return;
        }
        $.ajax({
            url:"/rest/test/excelUpload",
            data: formData,
            type:"POST",
            dataType:'json',
            cache: false,
            processData: false,
            contentType: false,
            async : false
        }).done(function (result) {
            if (result.sucess){
                layer.alert(result.msg);
                $("#excelUpForm").dialog("close")
                location.reload();
                $.ajax({
                    url:"/rest/test/export",
                    data: JSON.stringify(result.data),
                    type:"POST",
                    dataType:'json',
                    cache: false,
                    processData: false,
                    contentType: 'application/json;charset=UTF-8',
                    async : false
                }).done(function (resultSe) {
                    if (resultSe.sucess) {
                        location.href=resultSe.data;
                    }else{
                        layer.alert(resultSe.msg);
                    }
                })

            }else {
                layer.alert(result.msg);
                $("#excelUpForm").dialog("close");
            }
        })
    }
</script>

四、不稳定性解决

在上述二、三中的实现方式出现了正确的导出结果，但是出现导出结果不稳定的问题，后台没有任何问题，前端的导出excel页面有时有反应，有时候没有反应，why?

在ajax中，请求成功后先location.reload();后进行excel文件的导出，这样会出现一个问题，当页面刷新的快，excel文件导出的请求操作后台返回却发现前端页面已经刷新，从而不能接收excel导出的返回值，最终结论就是：excel是否能导出取决于location.reload();刷新的速度。解决办法：在ajax中不进行页面的刷新或者是把刷新放在最后一步，刷新操作不能放在ajax的中间步骤，否则会出现后续步骤的返回值无法接收。

阿尔法小师妹

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ajax嵌套ajax下载excel文件之问题解决

目录一、场景介绍二、设计过程三、借助第三方平台来下载文件四、不稳定性解决一、场景介绍按照模版导入excel文件，把符合规则的数据更新后，把异常数据导出excel，并记录导出原因。导入导出需要一键操作！！！二、设计过程用ajax上传文件，ajax上传成功后，在ajax的success中嵌套ajax实现文件的下载。前端代码如下：<div id=...
复制链接

扫一扫