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 需要展示的报表。

添加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 下载：