How to Print a PDF Document using JavaScript

Usually, we download a PDF file on our computer, open the file and click the print button to print its contents. However, you can easily print a PDF document directly from your web page using JavaScript. All you need is an iframe on your web page or you can create an iframe dynamically, add the document to iframe and print it. I’ll show you how you can print a PDF document using JavaScript.

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

We can use the iframe to display contents of our PDF document and then print the contents using a 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 a source (the PDF). I also a have <input> element of type button. In this way, you can first view the contents of the PDF and then print its contents.

The Markup with the Script

The onclick() property of the button will call a method named print().

<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="print()" value="Print PDF" />
    </p>
</body>

<script>
	let print = () => {
    	let objFra = document.getElementById('myFrame');
        objFra.contentWindow.focus();
        objFra.contentWindow.print();
    }
    
    // Using regular js features.
    
//     function print() {
//         var 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 read this post.

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="print('../sample.pdf')" 
            value="Print PDF" />
</body>

<script>
    let print = (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.
    }
    
    // Using regular js features.
    
//     function print(doc) {
//         var objFra = document.createElement('iframe');
//         objFra.style.visibility = 'hidden';
//         objFra.src = doc;                  
//         document.body.appendChild(objFra);
//         objFra.contentWindow.focus();  
//         objFra.contentWindow.print();  
//     }
</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 →