永利最大(官方)网站

伴随着移动设备用户（IOS、Android和Windows Phone）的不断增多，将现有应用系统迁移至移动设备已成为一种趋势，HTML5为类似的系统迁移工作提供了很好的技术支持。

全新发布的ActiveReports 8 中引入HTML 5 Viewer，可为移动设备提供强大的报表功能，用户可在移动设备中进行报表查看、导出、数据分析、数据钻取等操作。而且具有良好的跨设备（IOS、Android和Windows Phone）和跨浏览器（IE、Chrome、FireFox和Safari）兼容性。同时，HTML5 Viewer 可与Knockout、Bootstrap等前端框架结合使用。

接下来，我们将主要介绍 ActiveReports 8 中 HTML5 Viewer具有的功能和使用方法。

HTML5 Viewer 提供了三种用户界面风格，移动设备、桌面应用程序、以及用户自定义界面。可自动匹配用户使用的设备类型，呈现与之对应的报表界面风格。

• 移动设备界面风格

该界面风格为用户提供了，报表查看、导出、翻页、数据分析、数据钻取、文档目录、参数、查找等功能。

• 桌面应用程序界面风格

该界面风格为用户提供了，报表查看、打印、导出、翻页、数据分析、数据钻取、文档目录、参数、查找等功能。

• 用户自定义界面风格

可根据用户的需求，自定义HTML5 Viewer 工具栏的显示风格，并决定为用户提供哪些报表操作。

在ASP.NET应用程序中使用 HTML5 Viewer 功能。

第1步，创建一个空的ASP.NET应用程序。

第2步，将HTML5 Viewer相关JS和CSS拷贝到工程中。

HTML5 Viewer 相关的JS和CSS可以在ActiveReports安装目录的ComponentOne\ActiveReports 8\Deployment\Html中找到，分别为GrapeCity.ActiveReports.Viewer.Html.js、GrapeCity.ActiveReports.Viewer.Html.min.js和GrapeCity.ActiveReports.Viewer.Html.css。

第3步，在Web页面中添加以下JS和CSS的引用。

<link rel="stylesheet" href="GrapeCity.ActiveReports.Viewer.Html.css" >  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>  
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js" type="text/javascript"></script>  
<script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>  
<script type="text/javascript">  
</script>

第4步，在Web页面中添加Div对象，以作为HTML5 Viewer的容器。

<div id="viewer" style="width:600px;height:480px;"></div>  

第5步，使用以下代码初始化HTML5 Viewer。

$(function ()  
{  
   var viewer = GrapeCity.ActiveReports.Viewer(  
   {  
      element: '#viewer',  
      report: {  
         id: "Report.rdlx"  

 
      },  
      selectedReportIndex: 0,  

 
      reportService: {  
         url: '/ActiveReports.ReportService.asmx'  
      },  
      uiType: 'desktop',  
      documentLoaded: function reportLoaded()  
      {  
         console.log(viewer.pageCount);  
      },  
      reportLoaded: function (reportInfo)  
      {  
         console.log(reportInfo.parameters);  
      },  

 
      error: function (error)  
      {  
         console.log("error");  
      }  

 
   });  
});

第6步，运行应用程序得到以下结果。

备注：完整的示例代码请参考附件，或者安装ActiveReports电脑的以下路径。 C:\Users\用户名\Documents\ComponentOne Samples\ActiveReports 8\HTML5 Viewer

立即下载 ActiveReports 8， 体验 HTML5 报表浏览 的强大功能吧。

文章转自：葡萄城控件产品博客