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

Image1


Image2

添加报表

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

Image3

添加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 浏览报表了:

CodeBasedReport


RpxReport

Demo 下载: