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
        src="sample.pdf" id="myFrame" 
        frameborder="0" style="border:0;" 
        width="300" height="300">
        <input type="button" id="bt" onclick="print()" value="Print PDF" />

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

The Script
function print() {
    var objFra = document.getElementById('myFrame');

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.

Try this demo

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 Markup
    <input type="button" id="bt" onclick="print('sample.pdf')" value="Print PDF" />
The Script
    function print(doc) {
        var objFra = document.createElement('iframe'); = "hidden";    // HIDE THE FRAME.
        objFra.src = doc;                      // SET SOURCE.
        document.body.appendChild(objFra);  // APPEND THE FRAME TO THE PAGE.
        objFra.contentWindow.focus();       // SET FOCUS.
        objFra.contentWindow.print();      // PRINT 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.

That’s it.

Previous - Populate a SELECT Dropdown List with JSON Data using JavaScriptNext - Disable or Enable Submit Button using JavaScript

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!