Easyui 导出excel，并提示loading弹框

旅知知

于 2022-09-29 14:06:55 发布

阅读量814

点赞数 1

分类专栏： java 文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/qq_15421685/article/details/127105360

版权

java 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近继续维护老项目，优化了导出慢的问题；

后台技术：poi ，jdk6

前端：easyui ,jsp

后台代码部分省略： SXSSFWorkbook 能够处理大数据导出的，可上网找相应导出代码

        <dependency>
			<groupId>org.apache.poi</groupId>
			<artifactId>poi</artifactId>
			<version>3.10.1</version>
		</dependency>
		<dependency>
			<groupId>org.apache.poi</groupId>
			<artifactId>poi-ooxml</artifactId>
			<version>3.9</version>
		</dependency>

后台部分大体思路

    public void Export(HttpServletRequest req, HttpServletResponse res) {

        ServletOutputStream os = null;
        try {
            os = res.getOutputStream();
        } catch (IOException e1) {
            e1.printStackTrace();
        }
        res.reset();
        res.setContentType("application/octet-stream");

        String fileName = "excel导出";
        try {
            fileName = URLEncoder.encode(fileName, "UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        res.addHeader("Content-Disposition", "attachment; filename=" + fileName + ".xlsx");
        res.addHeader("filename",   fileName + ".xlsx");
      
     try {
           //poi导出部分代码省略
           //workbook.write(os);
           //
            os.flush();
            os.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

前端部分

loading代码

common.css

.datagrid-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    filter: alpha(opacity=30);
    display: none;
}



.datagrid-mask-msg {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    padding: 12px 5px 10px 30px;
    width: auto;
    height: 16px;
    border-width: 2px;
    border-style: solid;
    display: none;
}

common.js

/**
 * 需要引入这几个
 * <!-- jquery core -->
 * jquery-1.8.0.min.js
 * <!-- easyui -->
 * easyui.css
 * jquery.easyui.min.js
 * easyui-lang-zh_CN.js
 * @type {{unmask: MaskUtil.unmask, mask: MaskUtil.mask}}
 */

var MaskUtil = (function(){

    var $mask,$maskMsg;

    var defMsg = '正在处理，请稍待。。。';

    function init(){
        if(!$mask){
            $mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo("body");
        }
        if(!$maskMsg){
            $maskMsg = $("<div class=\"datagrid-mask-msg mymask\">"+defMsg+"</div>")
                .appendTo("body").css({'font-size':'12px'});
        }

        $mask.css({width:"100%",height:$(document).height()});

        $maskMsg.css({
            left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2,
        });

    }

    return {
        mask:function(msg){
            init();
            $mask.show();
            $maskMsg.html(msg||defMsg).show();
        }
        ,unmask:function(){
            $mask.hide();
            $maskMsg.hide();
        }
    }

}());

jsp页面引入的代码

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/jquery-easyui-1.2.5/default/easyui.css">

<script type="text/javascript"
        src="${ctx}/resources/js/jquery-easyui-1.2.5/locale/easyui-lang-zh.js"></script>


<%-- 自定义的样式和js -->
<link rel="stylesheet" type="text/css" href="${ctx}/resources/css/common.css">
<script type="text/javascript" src="${ctx}/resources/js/common.js"></script>

业务js部分代码

//导出
$("#导出按钮").click(
    function (){

        console.log("导出。。。。。。。。");

        //调用后台的接口，后台以流的形式输出
        var url = "xxxx.do";

        //开启loading
        MaskUtil.mask();
        var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = 'blob';
        xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
        xhr.onload = function () {
            if (this.status == 200) {
                var blob = this.response;
                var a = document.createElement('a');
                var url = window.URL.createObjectURL(blob);

                a.href = url;
                //设置文件名称
                a.download = this.getResponseHeader("filename");
                a.click();
            }
            MaskUtil.unmask();
        }

        //发送请求。如果需要携带参数的话。在send里面加参数
        xhr.send();
        // xhr.send(JSON.stringify({
        //     username: 'alex'
        // }));

        xhr.onerror =  function (){

            //关闭loading
            MaskUtil.unmask();
        }
 });