伴随着移动设备用户(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 提供了三种用户界面风格,移动设备、桌面应用程序、以及用户自定义界面。可自动匹配用户使用的设备类型,呈现与之对应的报表界面风格。

  • 移动设备界面风格

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

image

  • 桌面应用程序界面风格

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

image

  • 用户自定义界面风格

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

image

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

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

2015-02-04_173532

第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。

2015-02-04_174032

第3步,添加页面报表。

2015-02-04_174109

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

2015-02-04_174241

第4步,添加ActiveReports 9 Web服务

2015-02-04_174250

第5步,添加Web页面。

2015-02-04_174259

第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步,运行应用程序得到以下结果。

2015-02-04_174630

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

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

image

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