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();