How to Print a PDF Document using JavaScript

Last Updated: 7th March 2026

Usually, we download a PDF file on our computer, open the file and click the print button to print its contents. However, you can print a PDF document directly from your web page using JavaScript. You can load the PDF into an iframe (or similar container) and trigger the browser's print() function. I'll show you how.

What's an iframe?

An HTML iframe is used to display a web page within a web page. The iframe needs a source of the web page to display.

👉 This example explains the iframe element in detail.

We can use the iframe to display contents of our PDF document and then print the contents using a simple JavaScript code. However, you can also directly print the PDF document, without opening the file. In both the cases, we'll need an iframe.

Print PDF using inline iframe

In the first example, I have an iframe on my web page with the source file (the PDF). I also have an <input> element of type button. In this way, you can first view the PDF and then print its contents.

The Markup with the Script

When the page loads, the PDF (sample.pdf) also loads into the iframe. This will make sure that the user can view the PDF, scroll and read the document before printing it. The onclick() property of the button will call a method named printPDF().

<html>
<head>
    <title>Print PDF using inline iFrame</title>
</head>
<body>
    <iframe 
        src="../sample.pdf" id="myFrame" 
            frameborder="0" style="border:0;" 
                width="300" height="300">
    </iframe>
    <p><input type="button" id="bt" onclick="printPDF()" value="Print PDF" /></p>
</body>

<script>
    let printPDF = () => {
    	let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
</script>
</html>

Try it

I am creating an object of the iframe on my web page, setting focus on the element and using the contentWindow.print() method to print the document.

👉 And now, if you want to convert your entire form data into PDF using only JavaScript, you should See this tutorial.

Print PDF using a Dynamic iframe

In the second example, I do not have an (inline) iframe on my web page. I'll create an iframe dynamically using a JavaScript code. I’ll pass the document’s source as a parameter to the function, and provide the source to the dynamically created iframe and print its contents.

In this method, you will print the PDF document without opening it.

The Code

<html>
<head>
    <title>Print PDF using Dynamic iFrame</title>
</head>
<body>
    <input type="button" id="bt" 
        onclick="printPDF('../sample.pdf')" 
            value="Print PDF" />
</body>

<script>
    let printPDF = (doc) => {
    	let objFra = document.createElement('iframe');     // Create an IFrame.
        objFra.style.visibility = 'hidden';                // Hide the frame.
        objFra.src = doc;                   // Set source.

        document.body.appendChild(objFra);  // Add the frame to the web page.

        objFra.contentWindow.focus();       // Set focus.
        objFra.contentWindow.print();       // Print it.
    }
</script>
</html>

Try it

After creating the iframe, I’ll set its visibility property an hidden. You cannot see the document's contents, since the iframe itself remains hidden. Next, I’ll attach the newly created iframe to my web page, provide it with a source (using the parameter ‘doc’), set focus on its contents and print it.

Note: Please check Browser compatibility. It may not work with older IE browsers.

← PreviousNext →