Web Apps SSRS: Add print button in Chrome and Firefox

If you use Dynamics SL Web Apps in Chrome or Firefox, you have most likely noticed that when you view an SSRS report, you do not have a print button like you do in Internet Explorer. Due to the slow load times, we actively encourage our employees to NOT use Internet Explorer, so today I’ll show you how to add code to the RSReport.aspx file to manually get that print button to appear.

I started with the code here, but tweaked to make it specific for Web Apps and enhance a little bit by using append() to get the icon in the correct position and adding to the report load so it doesn’t disappear on us!

The first thing we’ll do is add an empty <div> to house a .pdf of the report. We’ll assign an id of pdfRender and use display:none to hide it.  You can put this anywhere in the <body> on the RSReport.aspx page.  I put mine right after the ending </form> <% End If%> tag.

<div id="pdfRender" style="display:none;"></div>

The next thing we need to do is to display a printer icon if the browser is NOT Internet Explorer or EDGE.  IE comes provided with the printer and this didn’t work in Edge (and I don’t really use Edge), so I excluded that, too.  I handled this by adding a $(document).ready function.  

I went ahead and tied the printer icon addition to the report load because I have navigation on the RSReport.aspx page, too.  If a user just kept running reports, the icon disappeared on me; by adding the function to the report load, the print icon comes back each time a report is run.  For some reason, this add_load function actually runs twice, so I added a test to see if the button already exists (checking for $("#PrintButton").length).  If it does not exist and the browser is not IE or Edge, then I am creating the button by running the function addPrinterIcon()

$(document).ready(function () { 
    //exclude IE and Edge
    var isIE = /MSIE/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge\/\d./i.test(navigator.userAgent) ;

    Sys.Application.add_load(function () {
        var viewerReference = $find("RSReportViewer");
        check_load = function () {
           if (!isIE) {
              if (viewerReference.get_isLoading()) {
                 if (!$("#PrintButton").length) { 
                     setTimeout(addPrinterIcon, 100);
                 }
               }
            }
          }
        check_load();
    });
});

In order to get the printer icon to display nicely, I am using the jQuery append() method to add it to the end of the existing Report Viewer menu bar.  We are essentially inserting an <a> tag that is wrapped in a table.  There is an extra table there for proper spacing to follow how the other icons are housed.  My addPrinterIcon() function is as follows. 

function addPrinterIcon() {
  var addInput = '<table cellpadding="0" cellspacing="0" toolbarspacer="true" style="display:inline-block;width:6px;"><tbody><tr><td></td></tr></tbody></table><div class=" " style="display:inline-block;font-family:Verdana;font-size:8pt;vertical-align:top;"><table cellpadding="0" cellspacing="0" style="display:inline;"><tbody><tr><td height="25px"><div><a id="PrintButton" title="Print" href="javascript:PrintReport()" style="width: 16px; height: 16px;" type="image" alt="Print"> <img runat="server" src="~/Reserved.ReportViewerWebControl.axd?OpType=Resource&Version=11.0.3442.2&Name=Microsoft.Reporting.WebForms.Icons.Print.gif"></a></div></td></tr></tbody></table></div>'
    $('#RSReportViewer_ctl05 div:first').append(addInput)
   }

When clicked, the #PrintButton will run the PrintReport() function, so we need to create that as follows.  This function opens a .pdf of the report in the #pdfRender div we created earlier and then prints it.  Since we added display: none, this is all hidden to the end user.  

function PrintReport() {
    var reportViewerName = 'RSReportViewer';
    var src_url = $find(reportViewerName)._getInternalViewer().ExportUrlBase + 'PDF';

    var contentDisposition = 'AlwaysInline';
    var src_new = src_url.replace(/(ContentDisposition=).*?(&)/, '$1' + contentDisposition + '$2');

    var iframe = $('<iframe>', {
        src: src_new,
        id: 'iframePDF'
    });

    $('#pdfRender').html(iframe);    //There should be a div named "pdfRender"

        var frame = iframe[0];
        if (frame != null || frame != undefined) {
            var contentView = frame.contentWindow;
            contentView.focus();
            contentView.print();
        }
}

UPDATE :: Thanks to Pat for pointing out that I forgot to mention you need to add a reference to jQuery near the top of your RSReport.aspx page to get this to work properly…

<script src="/Scripts/jquery-1.10.2.js"></script>

Here are some .css additions you could add for styling your new button.

/*custom print button*/
#PrintButton {padding: 2px 3px 6px 3px; border: 1px solid transparent; }
#PrintButton:hover {background: #cee3ea; border-color: #3a3a3a;}
#PrintButton:active {background: #d8f7f6; border-color: #3a3a3a;}

Our new button in action!

Feel free to share...

Leave a Reply

Your email address will not be published. Required fields are marked *

Close Menu