1. 程式人生 > >java檔案下載時頁面不能操作實現

java檔案下載時頁面不能操作實現

實現的原理:在父頁面加一個div,div裡面可以放一張正在載入的動態圖,然後子頁面下載檔案的時候彈出父頁面的div的內容,從而達到不能操作的目的。

1、父頁面加個div,裡面放了一張載入的動態圖。

<div id="loadingDiv">
        <img alt="請稍後..." src="image/loading.gif" class="img_cla"/>
</div>

div及其動態圖的樣式。

<style type="text/css">
        #loadingDiv {
                background-color:grey;
                filter: alpha(opacity=50); 
                opacity: 0.1;
                position: absolute;
                margin: auto;
                width: 100%;
                height: 100%;
                z-index: 100; 
                display:none;
               }
        .img_cla {
            margin : auto;
            position : absolute;
            top : 0;
            left : 0;
            bottom : 0;
            right : 0;
        }
    </style>

2、子頁面下載的時候彈出這個div的內容。

//彈出遮蓋層  
window.parent.$("#loadingDiv").fadeTo(200,0.5);

var xhh = new XMLHttpRequest();

                page_url = url;//下載的url
                xhh.open("post", page_url);

                xhh.responseType = 'blob';
                    xhh.onload = function () {
                            var name = xhh.getResponseHeader("Content-disposition");
                            var filename_ = name.substring(name.lastIndexOf("="));
                            var reg = new RegExp('"','g');
                            var filename = filename_.replace(reg,'').replace('=','');
                            var blob = new Blob([xhh.response], {type: 'text/zip'});
                            var csvUrl = URL.createObjectURL(blob);
                            var link = document.createElement('a');
                            link.href = csvUrl;
                            link.download = filename;
                            link.click();
                            
                            alert("檔案下載完成");
                            window.parent.$("#loadingDiv").fadeOut(200);//檔案下載完成關閉彈出窗
                    };
                    xhh.send();