在HTML5 Viewer中添加放大和缩小功能

ActiveReports从8开始支持HTML 5,可以通过自定义的方式增加放大和缩小的功能。本文主要介绍 ActiveReports 在使用HTML5 Viewer时,如何添加放大和缩小的功能。这个功能的实现依赖于jQuery和CSS。

发布于 2015/08/26 00:00

ActiveReports

ActiveReports从8开始支持HTML 5,可以通过自定义的方式增加放大和缩小的功能。

本文主要介绍 ActiveReports 在使用HTML5 Viewer时,如何添加放大和缩小的功能。

这个功能的实现依赖于jQuery和CSS。

1.首先添加放大和缩小的按钮

        <input type="image" disabled="disabled" id="btnZoomIn" style="height: 30px; width: 30px;"
            src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Zoom-In-icon.png" />
        <input type="image" disabled="disabled" id="btnZoomOut" style="height: 30px; width: 30px"
            src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Zoom-Out-icon.png" />

 

2.在reportLoaded中初始化

            var viewer = GrapeCity.ActiveReports.Viewer({
                element: '#viewerContainer',
                reportService: {
                    url: '/ActiveReports.ReportService.asmx'
                },
                uiType: 'desktop',
                reportLoaded: function () {
                    reportsButtons.prop('disabled', false);
                    currZoom = 1;
                    repName = viewer.option('report').id;
                    $("#btnZoomIn").prop("disabled", false);
                    $("#btnZoomOut").prop("disabled", false);
                },
                localeUri: 'Scripts/i18n/Localeuri.txt'
            });

 

3.添加放大缩小功能的实现

            $("#btnZoomIn").click(function () {
                var repExt = repName.substr(repName.indexOf(".") + 1)
                if (repExt == "rdlx") {
                    elem = $(".document-view");
                } else {
                    elem = $(".document-view").find("div").eq(0).children("div");
                }
                currZoom *= 1.1;
                elem.css("zoom", currZoom);
                elem.css("-moz-transform", "Scale(" + currZoom + ")");
                elem.css("-moz-transform-origin", "0 0");
           
            });
            $("#btnZoomOut").click(function () {
                var repExt = repName.substr(repName.indexOf(".") + 1)
                if (repExt == "rdlx") {
                    elem = $(".document-view");
                } else {
                    elem = $(".document-view").find("div").eq(0).children("div");
                }
                if (currZoom > 0.6) {
                    currZoom *= 0.9;
                    elem.css("zoom", currZoom);
                    elem.css("-moz-transform", "Scale(" + currZoom + ")");
                    elem.css("-moz-transform-origin", "0 0");
                 }
            });

 

效果截图:

2015-08-26_100634

示例下载:

 

您在使用产品过程中有任何疑问,可以登录葡萄城开发者社区和经验丰富的技术工程师、ActiveReports开发人员交流:了解更多

了解ActiveReports产品更多特性:

/developer/activereports

下载产品体验产品功能:

/download/?pid=16

ActiveReports 报表控件| 下载试用

ActiveReports 是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForm / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求,作为专业的报表工具为全球超过 300,000 开发人员提供了全面的报表开发服务。

您对ActiveReports产品的任何技术问题,都有技术支持工程师提供1对1专业解答,点击此处即可发帖提问>>技术支持论坛

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态