ActiveReports 报表控件：添加 WebViewer 控件加载进度条

论坛中有用户提到如何在 ActiveReports WebViewer 控件中添加加载进度条，来提示用户当前加载进度增强用户体验。

在本篇文章中我们将阐述如何在 WebViewer 的浏览类型为FlashViewer 时添加进度条，选择这个浏览方式的原因是我们需要使用 client side API 来跟踪前端的加载进度。

在本篇博客中，我们使用 C1ProgressBar 控件来展示加载进度，

最终效果图如下：

ReportProgress

设置 C1ProgressBar 控件的范围为 0 到 100。主要实现方法为捕获“OnLoadProgress” 事件，获取当前渲染进而获取当前加载进度，代码如下：

var viewer;

function init() {

   GrapeCity.ActiveReports.Viewer.OnLoad("WebViewer1", function () {

      viewer = GrapeCity.ActiveReports.Viewer.Attach("WebViewer1");

      viewer.setEventsHandler({

         OnLoadProgress: function (e) {

            var pageCount = e.PageCount;

            var valToIncrease = 100 / pageCount;

            var oldVal = $("#C1ProgressBar1").c1progressbar("option", "value");

            var newVal = oldVal + valToIncrease;

            $("#C1ProgressBar1").c1progressbar("option", "value", newVal);

});

});

HTML标记代码下：

<body onload="return init()">

   <form id="form1" runat="server">

   <asp:Label ID="Label1" runat="server" Text="Report Generation Progress:-"></asp:Label>

   <wijmo:C1ProgressBar ID="C1ProgressBar1" runat="server" FillDirection="East">

   </wijmo:C1ProgressBar>

   <div>

      <ActiveReportsWeb:WebViewer ID="WebViewer1" runat="server" Height="571px" ReportName="file: MovieCatalog.rdlx"

Width="1073px" ViewerType="FlashViewer">

         <FlashViewerOptions MultiPageViewColumns="1" MultiPageViewRows="1" UseClientApi="True">

</FlashViewerOptions>

      </ActiveReportsWeb:WebViewer>

   </div>

   </form>

</body>

That is all we need. To see it in action, you may download the sample application from the download link below.

Demo下载：

VS2010 + C# + AR9.0 + .NET4.0

更多ActiveReports报表功能请参考：/developer/activereports