如何做出“报表加载请稍后”的效果

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

我们来看一下页面效果:

在加载的时候:

然后报表展现:

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