在 ASP.NET MVC 中使用 ActiveReports HTML5 Viewer

ActiveReports(v8) 提供了 HTML5 Viewer 使其可以运行在HTML5应用中。使用 HTML5 Viewer 你可以在多平台和设备（PC 和 Mobile）中创建高效、快速和健壮的报表应用。同时，HTML5 Viewer 同时在前台提供了多样的导出功能(PDF, Excel, Word, etc).

这篇文章我们就来讲讲，如何在 ASP.NET MVC 中使用 HTML5 Viewer.

创建应用

首先，创建 ASP.NET MVC 应用。创建后我们添加 ActiveReport 报表需要的服务Service用于生成 HTML5 Viewer 需要展示的报表。

添加报表

接下来， 我们添加一个报表文件夹，在该文件夹下添加 SectionReport，同样你也可以添加 rpx 或 rdlx 报表到该文件夹下。

添加HTML5 Viewer

报表添加后，打开 Viewer 文件夹下的 Index.cshtml 文件使用以下代码添加 HTML5 Viewer：

<div id="viewer" style="height:700px"></div>
var viewer = GrapeCity.ActiveReports.Viewer({
   element: '#viewer',
   reportService: {
      url: 'ActiveReports.ReportService.asmx'
   },
   uiType: 'desktop',
   reportLoaded : function () {
      reportsButtons.prop('disabled', false);
   },
   documentLoaded : function(){
      console.log(viewer.pageCount);
   },
   error : function(error)
   {   
      console.log("error");
   }
});

使用 HTML5 Viewer 需要添加以下资源引用:
- GrapeCity.ActiveReports.Viewer.Html.js
- GrapeCity.ActiveReports.Viewer.Html.css
- bootstrap.js
- jquery-1.10.2.js
- knockout.js

注意：我们同时需要添加以下代码到App_Start 文件夹下 RouteConfig.cs 文件，这句代码的作用是运行报表：

routes.IgnoreRoute("{*allActiveReport}", new { allActiveReport = @".*\.ar8(/.*)?" });

完成以上操作后，就可以通过 HTML5 Viewer 浏览报表了：

Demo 下载：