简体   繁体   中英

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(); 

}

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.

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM