Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Print PDF File in IFrame using javascript getting one page only

here is my code to print a pdf file. here while printing time iam getting one page only i need a solution for that

  function printPdf(){
     var ifr = document.getElementById("frame1");
         //PDF is completely loaded. (.load() wasn't working properly with PDFs)
     ifr.onreadystatechange = function () {
        if (ifr.readyState == 'complete') {
              ifr.contentWindow.focus();
              ifr.contentWindow.print();
           }
       }
 }
like image 889
Vijay P.V Avatar asked Sep 19 '13 07:09

Vijay P.V


People also ask

How do I display a PDF in iframe?

Right-click on the link in the href attribute and click Copy link address. Create a new Text content block. Click the Embed Media icon and embed the HTML code in an iframe that points to the PDF URL you noted in step 3. Click the checkmark to see the PDF displayed in the newly created iframe.

Does iframe work with PDF?

Due to its wide compatibility, the iframe tag is widely used for embedding pdf. A browser that does not support PDF documents or the object tag can also use this tag to embed a pdf HTML code.

How can I download a PDF from a URL using JavaScript?

dispatchEvent(new MouseEvent('click')); } var fileURL = "link/to/pdf"; var fileName = "test. pdf"; download(fileURL,fileName); The code above is just to test download one file from a hardcoded URL. If it worked as intended, when the page is loaded, it should download the pdf from the provided url.

How do I print a PDF in HTML?

Press the shortcut key Ctrl + P to print the page, and then in the print window that appears, change the Destination to Save as PDF or choose Adobe PDF as the printer.


1 Answers

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>
like image 53
noseratio Avatar answered Oct 19 '22 15:10

noseratio