1. IronPDF
  2. IronPDF Blog
  3. PDF Tools
  4. Javascript Print PDF

Published May 24, 2023

How to Print PDF File in JavaScript

1.0 Introduction

The Portable Document Format (PDF) was developed by Adobe for the purpose of sharing documents with text and graphics. An additional program is needed in order to open a PDF document online. PDF files are very important for critical information in today's society. Many businesses create documents and invoices using PDF files. To meet client needs, developers produce PDF documents. It has never been easier to create PDFs thanks to modern libraries.

To select the ideal library for a project that uses this kind of library, we must weigh a number of factors, including build, read, and conversion capabilities.
In this tutorial, we'll go through a variety of JavaScript libraries for producing PDFs. We'll analyze the JS library and real-world application scenarios while focusing on three main points:

  • The running configuration
  • The modules that facilitate typing and custom fonts
  • Ease of use

After reading this, you'll be able to select the ideal PDF library for your JavaScript application. Finally, we'll also cover IronPDF, a useful and effective PDF library.

How to Print a PDF File in JavaScript

  1. Embed the PDF in an iframe tag
  2. Access the print option that comes with the PDF viewer of the iframe
  3. Print the PDF of the current page using JavaScript
  4. Invoke the printJS method and pass the element ID to the printable property
  5. Use an alternative library to print in .NET C# by utilizing the Print method

2.0 Libraries

Consider the scenario where we want the customer to be able to download and print a copy of our invoice. We need this invoice to print accurately and in a suitable manner. Here, we'll take a closer look at a few of the many libraries that are available for converting this invoice from the HTML file format to PDF.

2.1 Plain JavaScript Code

Normally, to print a PDF file's contents, we download it to our computer, open it, and select the print option. JavaScript, on the other hand, makes it simple to print a PDF file directly from a web page. All you need is an iframe on your website or the ability to dynamically build one, add the document, and print it. I'll demonstrate how to use JavaScript to print a PDF file. A web page inside another web page is shown using an iframe. For the web page to display, the iframe has to know its source.

<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.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();
    }
</script>
</html>
<html>
<head>
    <title>javascript print pdf</title>
</head>
<body>
    <iframe 
        src="Demo.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();
    }
</script>
</html>
HTML

As for printing PDF, a document's contents can be displayed using an iframe, and then the contents can be printed using JavaScript. In both situations, an iframe is required. On my website, there is an iframe with a source (the PDF). We also have a button-type input element. You can print the contents of the PDF after viewing its contents in this manner. The button's onclick property will invoke the print method. On my website, we are creating an object of the iframe, focusing on the element, and using the contentWindow to print the document, using the print method.

How to Print PDF File in JavaScript: Figure 1 - Printing

2.2 Print.js

Print.js was primarily created to enable us to print PDF files from within our apps without having to navigate away, import and print them from the user interface, or use embeds. This is for special circumstances where users only need to print the PDF files and don't need to open or download them.

When users ask to print reports that are generated on the server side, for instance, this can be helpful. These reports are returned to you as PDF documents. These files can be printed without needing to be opened. Within our apps, Print.js provides a convenient way to print these files.

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
        <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
    </head>
    <body>
        <div id="print-area" class="print-main">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>AAA</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>BBB</td>
                    <td>24</td>
                </tr>
            </table>
        </div>
        <button id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
        <link href="https://printjs-4de6.kxcdn.com/print.min.css" rel="stylesheet">   
    </head>
    <body>
        <div id="print-area" class="print-main">
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                <tr>
                    <td>AAA</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>BBB</td>
                    <td>24</td>
                </tr>
            </table>
        </div>
        <button id="btnPrint">Print</button>
        <script>
                $(document).ready(function(){
                    $("#btnPrint").on("click",function(){
                        printJS({
                            printable: 'print-area',
                            type: 'html'});
                    })
                })
        </script>
    </body>
</html>
HTML

The above code can be used to print PDF files directly from the website. It shows that printing it will print all the HTML strings available inside the HTML element with the ID named "print-area".

How to Print PDF File in JavaScript: Figure 2 - Printing these strings

2.3 IronPDF

IronPDF was developed to make it simple for developers to easily create, examine, and edit PDF documents. Along with all the restrictions and different web components that the library supports, the IronPDF .NET package also works with Xamarin, Blazor, Unity, HoloLens apps, Windows Forms, HTML, ASPX, Razor HTML, .NET Core, ASP.NET, and WPF applications. It also converts HTML to PDF using the Chrome engine. Both offline Windows applications and online ASP.NET applications can use the Microsoft.NET and.NET Core programs. IronPDF enables the creation of visually stunning PDFs with a title and footer using HTML 5, JavaScript, CSS, and pictures. The API library features a robust HTML-to-PDF converter that works well with multiple PDF files together, as well as a standalone PDF conversion engine that is independent of any external sources.

Without requiring Acrobat Reader, users of the IronPDF PDF library can split and combine pages in new or existing PDF documents, read and edit existing PDF files, extract images from PDF files, and add text, graphics, bookmarks, watermarks, headers, and footers multiple images. Users can also create PDF objects from text. Both CSS files and CSS media files can be used to create PDF documents. IronPDF users have the option to create, upload, and edit both new and preexisting PDF forms.

  • A PDF image can be created from a variety of sources, including HTML, HTML 5, ASPX, and Razor/MVC View. HTML pages and images can be converted to PDF with IronPDF.
  • Interactive PDF include those that let you create interactive PDF, fill out and submit interactive forms, merge and divide PDF files, extract text and images from PDF files, search text in PDF files, rasterize PDFs to images, change font size, and convert PDF files.
  • Additionally, it allows the validation of HTML login forms using user-agents, proxies, cookies, HTTP headers, and form variables.
  • IronPDF gives us access to password-protected documents by asking for usernames and passwords.

The below code is the sample code to print PDFs using IronPDF.

var renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderUrlAsPdf("www.google.com");
pdf.Print(300);
var renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderUrlAsPdf("www.google.com");
pdf.Print(300);
Dim renderer = New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("www.google.com")
pdf.Print(300)
VB   C#

The above code shows that it will generate PDF file from the given URL. First it will generate the PDF document URL then it will print the PDF document. IronPDF uses a few lines of code to generate PDF files. IronPDF help us to print HTML elements easily, and it can print any type of HTML object.

How to Print PDF File in JavaScript: Figure 3 - IronPDF

3.0 Conclusion

The user can see the JavaScript code above, but it could be abused by others. The use of the source code in this manner is possible. Additionally, it is not difficult to add code to the website that endangers the security of data sent through it. The aforementioned JavaScript library is viewed differently by different browsers. The code must therefore run across a variety of systems before being released. Because some new functionalities are not supported by older browsers, we also need to look at browser compatibility for those. The libraries mentioned above can produce PDF files. The user must also have some familiarity with the script they are working with.

On the other hand, the IronPDF library is secure. IronPDF is independent of the browser and is compatible with all browsers. With just a few lines of code, we can create and read PDF files. In addition to a free license for developers, it offers a choice of licenses for purchase to satisfy their needs. A perpetual license and one year of software support, upgrades, and options for SaaS and OEM redistribution are some things included in the $749 Lite package. Additionally, it does not include ongoing costs. These licenses are one-time investments that can be used for production, staging, and development. Additionally, IronPDF offers free licenses that are time-limited and resistant to redistribution. For a complete list of IronPDF costs and licensing details, please click here.