如何做出“報表載入請稍後”的效果

大資料量的報表在頁面載入的時候時常會遇到這樣一個問題：在報表正在生成html頁面的時候，由於報表正在取數計算，這時候頁面是空白的，如何來增加類似載入進度條的功能呢？

下面我們來介紹一下。

整個過程都在jsp用利用Javascript來完成，與報表模版無關，這樣更加方便客戶除錯。

首先我們要編寫一下頁面中Javascript的方法：

var s1 = setInterval(“loading.innerText+=’.`”, 500);

var s2 = setInterval(“loading.innerText = ””, 8000);

設定兩個超時物件,s1是超時500毫秒,s2是8000毫秒

然後設定一個層,這個在超時的這段時間內顯示在頁面中,也就是說,在給報表計算的這段時間內,頁面上只顯示這個層.

document.writeln(“<div id=”loadingDiv” style=”z-index:50000;position:absolute;left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);top:expression((document.body.clientHeight-this.style.pixelHeight)/3+document.body.scrollTop);”>”);

document.writeln(” <table border=”1” width=”260” cellspacing=”0” cellpadding=”4” style=”border-collapse: collapse;FILTER: Alpha(opacity=95)” bgcolor=”#ffffff”>”);

document.writeln(” <tr>”);
document.writeln(” <td bgcolor=”#2D2D2D”>”);
document.writeln(” <table width=”100%” border=”0” cellspacing=”0” cellpadding=”0”>”);

document.writeln(” <tr>”);
document.writeln(” <td style=”font-size:12px;color:#ffffff”>”);
document.writeln(” 頁面正在載入,請稍候…</td>”);
document.writeln(” <td width=”1”>”);
document.writeln(” <span title=關閉 style=”CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px;” onClick=”document.all.loadingDiv.style.display=’none’”>×</span> </td>”);

document.writeln(” </tr>”);
document.writeln(” </table>”);
document.writeln(” </td>”);
document.writeln(” </tr>”);
document.writeln(” <tr>”);
document.writeln(” <td>”);
document.writeln(” <table width=”100%” border=”0” cellspacing=”0” cellpadding=”0”>”);

document.writeln(” <tr>”);
document.writeln(” <td width=”35” align=”center”>”);
document.writeln(” <img src=”load.gif”> </td>”);
document.writeln(” </tr>”);
document.writeln(” </table></td>”);
document.writeln(” </tr>”);
document.writeln(” </table>”);
document.writeln(“</div>”)
document.writeln(“<SCRIPT LANGUAGE=”javascript”> “);
document.writeln(“<!– Hide “);
document.writeln(“function killErrors() { “);
document.writeln(“return true; “);
document.writeln(“} “);
document.writeln(“window.onerror = killErrors; “);
document.writeln(“// –> “);
document.writeln(“</SCRIPT>”);

這個層中主要就是顯示了一個動態的gif圖片.

接著,我們在window.onload()方法中先清除掉兩個超時物件,再清楚掉”頁面載入請稍後”這個層.

function window.onload()

clearInterval(s1);//清除掉超時物件
clearInterval(s2);
loadingDiv.removeNode(true);//清除掉載入層

}

然後在展現我們的報表標籤:

<table align=center>
<tr><td>
<report:html name=”report1″ reportFileName=”loading.raq.raq”
needSaveAsWord=”yes”
needSaveAsPdf=”yes”
needSaveAsExcel=”yes”

wordLabel=”<%=wordImage%>”
pdfLabel=”<%=pdfImage%>”
submit=”<%=submitImage%>”
excelLabel=”<%=excelImage%>”
/>
</td></tr>
</table>