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");}});
效果截图:
示例下载:
您在使用产品过程中有任何疑问,可以登录葡萄城开发者社区和经验丰富的技术工程师、ActiveReports开发人员交流:了解更多。
了解ActiveReports产品更多特性:
下载产品体验产品功能: