Print a PDF via an iframe in Chrome/Firefox/IE

Question

I want to trigger the print of a PDF file which I load in and iframe.

After looking around, I came up with the following bit

<iframe name="pdfname" id="pdfid"></iframe>

<button id="printbtn">Print</button>

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        $("#pdfid").load(function() {
            window.frames["pdfname"].focus();
            window.frames["pdfname"].print();
        });

        $("#printbtn").click(function () {
            $("#pdfid").attr("src", '@Url.Action("PdfTest", "Home")');
        });
    });
</script>

This works perfectly in Chrome.

In Firefox, I get the following error (I read somewhere it was a bug that was supposed to be fixed in version 21, but it wasn't)

Permission denied to access property 'print'

In Internet Explorer 10 and 9, I get the following error

Invalid calling object

which seems to point to the PDF generated by my MVC action.

I've seen numerous posts with problems similar to mine, yet haven't come across a working solution so far.

What I would really want to know is how RADPDF managed to get this working in every browser

Click the print button on this page

I know this can be done, I need help from you brains out there!

Cheers

Answer 1

Try the following, might work in all browsers. ( I have tested with IE8 and chrome only )

<style type="text/css">
    @media print 
    {
        .dontprint{display:none} 
    }
</style>
<script type="text/javascript">
    function printIframePdf(){
        window.frames["printf"].focus();
        try {
            window.frames["printf"].print();
        }
        catch(e){
            window.print();
            console.log(e);
        }
    }
    function printObjectPdf() {
        try{            
            document.getElementById('idPdf').Print();
        }
        catch(e){
            printIframePdf();
            console.log(e);
        }
    }

    function idPdf_onreadystatechange() {
        if (idPdf.readyState === 4)
            setTimeout(printObjectPdf, 1000);
    }
</script>
<div class="dontprint" >
    <form><input type="button" onClick="printObjectPdf()" class="btn" value="Print"/></form>
</div>

<iframe id="printf" name="printf" src="http://pdfUrl.pdf" frameborder="0" width="440" height="580" style="width: 440px; height: 580px;display: none;"></iframe>
<object id="idPdf" onreadystatechange="idPdf_onreadystatechange()"
    width="440" height="580" style="width: 440px; height: 580px;" type="application/pdf"
    data="http://pdfUrl.pdf">
    <embed src="http://pdfUrl.pdf" width="440" height="580" style="width: 440px; height: 580px;" type="application/pdf">
    </embed>
    <span>PDF plugin is not available.</span>
</object>