快逸报表工具

大数据量的报表在页面加载的时候时常会遇到这样一个问题：在报表正在生成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>

我们来看一下页面效果:

在加载的时候:

然后报表展现:

通过这样的设置,更加完善了报表展现方式,并且提高了在使用中的客户体验度.