Print PDF File in IFrame using javascript getting one page only

I suspect that’s because the whole window gets printed (which has the current view of the iframe with the 1st page of the PDF rendered). Use <object> instead:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <script>
    function PrintPdf() {
        idPrint.disabled = 0;
        idPdf.Print();
    }

    function idPdf_onreadystatechange() {
        if (idPdf.readyState === 4)
            setTimeout(PrintPdf, 1000);
    }
    </script>

</head>

<body>
    <button id="idPrint" disabled=1 onclick="PrintPdf()">Print</button>
    <br>
    <object id="idPdf" onreadystatechange="idPdf_onreadystatechange()"
        width="300" height="400" type="application/pdf"
        data="test.pdf?#view=Fit&scrollbar=0&toolbar=0&navpanes=0">
        <span>PDF plugin is not available.</span>
    </object>
</body>

This code is verified with IE. Other browsers will still render the PDF, but may not print it.

[UPDATE] If you need dynamic loading and printing, the changes to the above code are minimal:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <script>
    function PrintPdf() {
        idPdf.Print();
    }

    function idPdf_onreadystatechange() {
        if (idPdf.readyState === 4)
            setTimeout(PrintPdf, 1000);
    }

    function LoadAndPrint(url)
    {
        idContainer.innerHTML = 
            '<object id="idPdf" onreadystatechange="idPdf_onreadystatechange()"'+
                'width="300" height="400" type="application/pdf"' +
                'data="' + url + '?#view=Fit&scrollbar=0&toolbar=0&navpanes=0">' +
                '<span>PDF plugin is not available.</span>'+
            '</object>';
    }
    </script>
</head>

<body>
    <button id="idPrint" onclick="LoadAndPrint('http://localhost/example.pdf')">Load and Print</button>
    <br>
    <div id="idContainer"></div>
</body>

More Related Contents:

Leave a Comment Cancel reply