Codewolfy - Learn Programming For free
Generate PDF from HTML using Javascript and jsPDF

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

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

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

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


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

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

Create new file with any name and .html extension 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 above example, we have created simple webpage and included jsPDF library file. When use click on button then our PDF generator function is called.

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

So whenever user click on download button, it will automatically convert webpage into PDF file and download it to user's system.

There are plenty of methods which can be used while generating PDF file like text(), addPage() or addImage() function. Please consider 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 above example, it will add custom data to PDF file like paragraph, page or image to our PDF. Here, we can append data using those function into our HTML based PDF file too.

Conclusion

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

Share your thoughts

Ask anything about this examples