Convert HTML to PDF using JavaScript

7 mins0
Convert HTML page into PDF using JavaScript

Nowadays, exporting data to PDF is common. The PDF files can contain links, buttons, tables, and formatted data like doc files and can be electronically signed as actual documents.

While providing bulk download functionality to users, PDF can be an idle choice. It can be useful to provide dynamically created data offline. There are plenty of libraries or software to generate PDF files from Web pages. Most of them are JavaScript-based.

In this example, we will create a webpage and export it into a PDF file that the user can download and view. Here, we will use jsPDF which is the best library to create PDF from HTML using JavaScript. The jsPDF is easy to integrate and has a variety of methods.

Before starting, you need to download the library file for jsPDF or you can use the below CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>

Let’s take an example, to create PDF from a current webpage with a click of a button. This webpage will contain a simple heading, paragraph, table, and button. When a user clicks on the button it will convert the current webpage into PDF and download it.

Create a new file HTML file and update it as below:

<!DOCTYPE html>
<html>
    <head>
        <title>Convert HTML to PDF using JavaScript</title>
    </head>
    <body>
        <div id="content">
            <h2>Convert HTML to PDF using JavaScript</h2>
            <p>This page contains title, paragraph and table.</p>
            <table>
              <thead>
                <tr>
                  <th>#</th>
                  <th>First</th>
                  <th>Last</th>
                  <th>Handle</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th>2</th>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <th>3</th>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>@twitter</td>
                </tr>
              </tbody>
            </table>
        </div>
        <button id="generateButton" onclick="downloadPDF()">Generate PDF</button>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
        <script type="text/javascript">
            function downloadPDF(){
                var pdf = new jsPDF('p', 'pt', 'letter');
                pdf.canvas.height = 72 * 11;
                pdf.canvas.width = 72 * 8.5;

                pdf.fromHTML(document.body);

                pdf.save('test.pdf');
            }
        </script>
    </body>
</html>

In the above example, we have created a simple webpage and included a jsPDF library file. When using the click-on button then our PDF generator function is called.

In this function, we will set the PDF size as per pepper size and set the height and width of the PDF. Then we will convert the body part of a webpage and get HTML of it. At last, we will call the save method of jsPDF and provide one parameter which will be the file name of a new PDF file.

So whenever a user clicks on the download button, it will automatically convert the webpage into a PDF file and download it to the user’s system.

There are plenty of methods that can be used while generating PDF files like text(), addPage(), or addImage() functions. Please consider the below example to use those functions :

function downloadPDF(){
    var doc = new jsPDF();

    //Add text
    doc.text(20, 20, 'Hello world!');
    doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');

    //Add page
    doc.addPage();
    doc.text(20, 20, 'Second Page');

    //Add image
    var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/...';
    doc.addImage(imgData, 'JPEG', 15, 40, 350, 220);

    doc.save('test.pdf');
}

As per the above example, it will add custom data to PDF files like paragraphs, pages, or images to our PDF. Here, we can append data using those functions into our HTML-based PDF file too.

Conclusion

In this article, we have created a simple PDF file using JavaScript and the jsPDF library. There are many configurations available like page orientation or size. Here, we can also specify one portion of a page to generate a PDF.

Related Articles