Adding Zoom Functionality to HTML5 Viewer

BACKGROUND

With the introduction of ActiveReports 9, we added the HTML5 Viewer which is a light weight client side component allowing the reports to be displayed on the client machine smoothly. Though it nearly provides all the features offered the WebViewer control, I recently had one user inquiring about zooming functionality in the HTML5 viewer which is currently not available. After some research, I was finally able to provide him a workaround which took care of his requirements. So if someone is looking for similar functionality, this blog is the place to check out. Here is a sneak peek of the output which we will achieve after following this blog.

IMPLEMENTATION

In order to add this functionality we will require the power of jQuery and CSS. We will use CSS transform property and apply it using jQuery. Also since all browsers behave differently, we will apply the transform property considering each browser. Here we cater Internet Explorer, FireFox and Chrome. So the first we need to do is add Zoom In and Zoom Out buttons. The following HTML code does it for us.

        <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" />  
        <div id="viewerContainer">

As you will notice above, the zoom buttons have disabled attribute set for them as we would not like them to work while there is no report on the viewer. This means we need to enable them as soon as the report is displayed on the viewer. To do this, we will handle the "reportLoaded" event of the HTML5 viewer. This is how the script will look like:

            var viewer = GrapeCity.ActiveReports.Viewer({  
                reportLoaded: function () {  
                    reportsButtons.prop('disabled', false);  
                    currZoom = 1;  
                    repName = viewer.option('report').id;  
                    $("#btnZoomIn").prop("disabled", false);  
                    $("#btnZoomOut").prop("disabled", false);  
                }  
            });

And finally comes handling of the clicks of the Zoom In and Zoom Out buttons. The following code does the job for us.

        var elem;  
        var currZoom;  
        var repName;  
        $(function () {  
            $("#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");  
                 }  
            });  
        });

You will notice that in the above code, we have accessed different elements for section report and page report. This is because of the difference in the structure when the reports render on the viewer. I must mention that the zooming results would be slightly better in case of section reports as compared to page reports.

CONCLUSION

So we just saw how with the help of jQuery and CSS we can add zooming functionality to the HTML5 viewer. A sample application demonstrating this implementation can be downloaded from the link below. Download Sample