伴隨著移動設(shè)備用戶（IOS、Android和Windows Phone）的不斷增多，將現(xiàn)有應(yīng)用系統(tǒng)遷移至移動設(shè)備已成為一種趨勢，HTML5為類似的系統(tǒng)遷移工作提供了很好的技術(shù)支持。

全新發(fā)布的ActiveReports 8 中引入HTML 5 Viewer，可為移動設(shè)備提供強(qiáng)大的報表功能，用戶可在移動設(shè)備中進(jìn)行報表查看、導(dǎo)出、數(shù)據(jù)分析、數(shù)據(jù)鉆取等操作。而且具有良好的跨設(shè)備（IOS、Android和Windows Phone）和跨瀏覽器（IE、Chrome、FireFox和Safari）兼容性。同時，HTML5 Viewer 可與Knockout、Bootstrap等前端框架結(jié)合使用。

接下來，我們將主要介紹 ActiveReports 8 中 HTML5 Viewer具有的功能和使用方法。

HTML5 Viewer 提供了三種用戶界面風(fēng)格，移動設(shè)備、桌面應(yīng)用程序、以及用戶自定義界面。可自動匹配用戶使用的設(shè)備類型，呈現(xiàn)與之對應(yīng)的報表界面風(fēng)格。

• 移動設(shè)備界面風(fēng)格

該界面風(fēng)格為用戶提供了，報表查看、導(dǎo)出、翻頁、數(shù)據(jù)分析、數(shù)據(jù)鉆取、文檔目錄、參數(shù)、查找等功能。

• 桌面應(yīng)用程序界面風(fēng)格

該界面風(fēng)格為用戶提供了，報表查看、打印、導(dǎo)出、翻頁、數(shù)據(jù)分析、數(shù)據(jù)鉆取、文檔目錄、參數(shù)、查找等功能。

• 用戶自定義界面風(fēng)格

可根據(jù)用戶的需求，自定義HTML5 Viewer 工具欄的顯示風(fēng)格，并決定為用戶提供哪些報表操作。

在ASP.NET應(yīng)用程序中使用 HTML5 Viewer 功能。

第1步，創(chuàng)建一個空的ASP.NET應(yīng)用程序。

第2步，將HTML5 Viewer相關(guān)JS和CSS拷貝到工程中。

HTML5 Viewer 相關(guān)的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步，運(yùn)行應(yīng)用程序得到以下結(jié)果。

備注：完整的示例代碼請參考附件，或者安裝ActiveReports電腦的以下路徑。 C:\Users\用戶名\Documents\ComponentOne Samples\ActiveReports 8\HTML5 Viewer

立即下載 ActiveReports 8， 體驗 HTML5 報表瀏覽 的強(qiáng)大功能吧。

文章轉(zhuǎn)自：葡萄城控件產(chǎn)品博客