jquery - SSRS print button in Chrome and Firefox

Question

I have reports in SSRS 2005. I am using remote reports. In IE, the print button shows, but in Firefox and Chrome, the print button does not show.

My reports are shown in jquery UI dialogs, so I cannot just do a window.print. My reports render just fine within the modals.

I need to be able to issue a print command to the reportviewer the same way it is done from within the control, but only in firefox and chrome.

I dug into the markup for the report viewer, and found this code. I tried to manually inject it into the reportviewer with no success.

<table id="reportViewer_ctl01_ctl07_ctl00_ctl00" onclick="document.getElementById(&#39;reportViewer&#39;).ClientController.LoadPrintControl();return false;" onmouseover="this.Controller.OnHover();" onmouseout="this.Controller.OnNormal();" title="Print" style="display:none;">
                                <script type="text/javascript">
                                    document.getElementById('reportViewer_ctl01_ctl07_ctl00_ctl00').Controller = new ReportViewerHoverButton("reportViewer_ctl01_ctl07_ctl00_ctl00", false, "", "", "", "#ECE9D8", "#DDEEF7", "#99BBE2", "1px #ECE9D8 Solid", "1px #336699 Solid", "1px #336699 Solid");
                                </script><tr>
                                    <td><input type="image" name="reportViewer$ctl01$ctl07$ctl00$ctl00$ctl00" title="Print" src="/Reserved.ReportViewerWebControl.axd?OpType=Resource&amp;Version=9.0.30729.4402&amp;Name=Microsoft.Reporting.WebForms.Icons.Print.gif" alt="Print" style="height:16px;width:16px;padding:2px;" /></td>
                                </tr>
                            </table>

Any ideas?

Answer 1

Here's what I did to create a pseudo print button which emulates the print function of Report Viewer in Internet Explorer to other browsers.

Please take note that the solution below requires JQuery. No ActiveX installation is necessary.

Here are the steps.

Step 1. Add the print button in your page where the report viewer is situated.

<input id="PrintButton" title="Print" style="width: 16px; height: 16px;" type="image" alt="Print" runat="server" src="~/Reserved.ReportViewerWebControl.axd?OpType=Resource&amp;Version=11.0.3442.2&amp;Name=Microsoft.Reporting.WebForms.Icons.Print.gif" />

Be sure to change the Version number to your RS version. If you're having trouble with the html code, you can open the page with internet explorer and inspect the print element and copy it.

Step 2. Add a div where your PDF will be rendered.

<div class="pdf">
    </div>

Step 3. Add the script.

$(document).ready(function () {
// Check if the current browser is IE (MSIE is not used since IE 11)
        var isIE = /MSIE/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent);

function printReport() {

            var reportViewerName = 'ReportViewer'; //Name attribute of report viewer control.
            var src_url = $find(reportViewerName)._getInternalViewer().ExportUrlBase + 'PDF';

            var contentDisposition = 'AlwaysInline'; //Content Disposition instructs the server to either return the PDF being requested as an attachment or a viewable report.
            var src_new = src_url.replace(/(ContentDisposition=).*?(&)/, '$1' + contentDisposition + '$2');

            var iframe = $('<iframe>', {
                src: src_new,
                id: 'pdfDocument',
                frameborder: 0,
                scrolling: 'no'
            }).hide().load(function () {
                var PDF = document.getElementById('pdfDocument');
                PDF.focus();
                try {
                    PDF.contentWindow.print();
                }
                catch (ex) {
                    //If all else fails, we want to inform the user that it is impossible to directly print the document with the current browser.
                    //Instead, let's give them the option to export the pdf so that they can print it themselves with a 3rd party PDF reader application.

                    if (confirm("ActiveX and PDF Native Print support is not supported in your browser. The system is unable to print your document directly. Would you like to download the PDF version instead? You may print the document by opening the PDF using your PDF reader application.")) {
                        window.open($find(reportViewerName)._getInternalViewer().ExportUrlBase + 'PDF');
                    }
                }

            })

            //Bind the iframe we created to an invisible div.
            $('.pdf').html(iframe);


        }

// 2. Add Print button for non-IE browsers
        if (!isIE) {

            $('#PrintButton').click(function (e) {
                e.preventDefault();
                printReport();
            })
        }

});

Code explanation :

First we created a variable which detects if the browser is IE or not.

By using the _getInternalViewer() method in Reserved.ReportViewerWebControl.axd we can request a PDF version of the report as a request which is originally retrieved upon clicking the export button.

We then assigned a contentDisposition variable as 'AlwaysInline' because we want to request the report as a PDF, not as an attachment but as a PDF that we can render in an html element. https://msdn.microsoft.com/en-us/library/microsoft.reporting.webforms.reportviewer.exportcontentdisposition.aspx

The src_new variable replaces the default EXPORT button content disposition request (which is set to AlwaysAttachment by default) with our new request 'AlwaysInline'.

Next, we then set the src of the iframe to our new url which when loaded, will reveal our report from reportviewer as PDF.

The chained commands in the iframe includes hiding the pdf element, rendering it and printing it right away after it finishes loading the pdf.

Ending remarks

I hope that someone will find this code useful because I had a hard time finding a decent solution online and this is what I came up with after doing some research.