伴隨著移動設備用戶（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 報表瀏覽 的強大功能吧。

文章轉自：葡萄城控件產品博客