Vijay P.V
Vijay P.V

Reputation: 145

Print PDF File in Javascript using Iframe

here is my code to print a pdf file in JavaScript using iframe. but i cant able to print nothing is happening , but this code is perfectly working in google chrome. in IE8 not working. ContentLoaderDiv is html division. please help me..

When I print a PDF document from our application which uses Java script to print instead of adobe Reader print dialog the browser print dialog is invoked.

Have anyone seen this problem? How to invoke the Adobe reader printer dialog instead of browser print dialog?

 function printPdf() {
        var ContentLoaderDiv = document.getElementById('ContentLoaderDiv');
        ContentLoaderDiv.innerHTML = "";
        ContentLoaderDiv.innerHTML = '<div id="pdfdiv" style="position: relative;"><iframe id="frame1"  height="800" width="700" src="' + document.getElementById("<%= hdnPDFPathForObject.ClientID  %>").value + "print.pdf#scrollbar=1&toolbar=1&statusbar=0&messages=0&navpanes=1" + '"' + " /></iframe></div>";
        frame1.focus();
        frame1.print(); 

}

Upvotes: 1

Views: 13588

Answers (2)

Svela
Svela

Reputation: 639

I have struggled a bit to find a solution that works for both IE and Chrome. This works for me:

$(function() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');
    var trident = ua.indexOf('Trident/');
    var edge = ua.indexOf('Edge/');
    var url = '/url/to/file.pdf';
    var pdf ='';
    var style = 'position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden;';

    if(msie > 0 || trident > 0 || edge > 0){
        pdf = '<object data="' + url + '" name="print_frame" id="print_frame" style="' + style + '" type="application/pdf">';
    }
    else{
        pdf ='<iframe src="' + url + '" name="print_frame" id="print_frame" style="' + style + '"></iframe>';
    }

    $(document.body).append(pdf);

    setTimeout(function(){
        window.frames["print_frame"].focus();
        window.frames["print_frame"].print();
    },2000);
});

...cheers.

Upvotes: 1

Powerslave
Powerslave

Reputation: 1428

Try this one:

function PdfUtil(url) {

    var iframe;

    var __construct = function(url) {
        iframe = getContentIframe(url);
    }

    var getContentIframe = function(url) {
        var iframe = document.createElement('iframe');
        iframe.src = url;
        return iframe;
    }

    this.display = function(parentDomElement) {
        parentDomElement.appendChild(iframe);
    }

    this.print = function() {
        try {
            iframe.contentWindow.print();
        } catch(e) {
            throw new Error("Printing failed.");
        }
    }

    __construct(url);
}

And you can use it as follows:

var pdf = new PdfUtil(PDF_URL);
pdf.display(document.getElementById('placeholder'));

document.getElementById('printBtn').onclick = function() {
    pdf.print();
}

Obviously, though PDF_URL here is a "constant", in your case it should most probably be generated.

Works perfectly with IE8 and Chrome (should work also with other browsers). Also, the OO approach makes it far more maintainable and/or reusable. Slight modifications to the actual logic might still be required to fit all your needs.

Upvotes: 5

Related Questions