ActiveReports 8 新特性（2）：HTML5 报表浏览器

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

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

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

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

移动设备界面风格

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

桌面应用程序界面风格

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

用户自定义界面风格

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

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

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

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

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

第3步，添加页面报表。

第4步，在报表页面中添加文字。

第4步，添加ActiveReports 9 Web服务

第5步，添加Web页面。

第4步，在Web页面中添css文件。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ActiveReports HTML5 viewer - basic sample</title>
    <link href="css/theme-cosmo.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">
    <link href="css/GrapeCity.ActiveReports.Viewer.Html.css" rel="stylesheet">
</head>

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

<body>
    <div id="viewer" style="width:600px;height:480px;"></div>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap-3.0.0.js"></script>
    <script src="Scripts/knockout-2.3.0.js"></script>
    <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js"></script>
    <script type="text/javascript">
    $(function () {
        var viewer = GrapeCity.ActiveReports.Viewer(
        {
            element: '#viewer',
            report: {
                id: "PageReport1.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");
            }
        });
    });
    </script>
</body>

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

备注：完整的示例代码请参考附件，或者安装ActiveReports电脑的以下路径。

C:\Users\用户名\Documents\ComponentOne Samples\ActiveReports 9\HTML5 Viewer

立即下载 ActiveReports，体验 HTML5 Viewer 带来的强大功能吧。