DEV Community

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

How To Convert HTML To PDF Using jsPDF

In this article, we will see how to convert HTML to pdf using jsPDF. Here, we will learn how to convert HTML to PDF using javascript.

We are using jsPDF to generate PDF in javascript. It can generate PDFs from the client side. The jsPDF is very easy to use in javascript.

It also provides multiple options for generating PDF files. You can generate PDF files with images, and multiple pages, and also support different languages like Japanese, Arabic, Russian, etc.

Learn More: jsPDF Javascript PDF Generate.

So, let's see jsPDF HTML to pdf convert, jsPDF HTML to pdf multiple pages, convert HTML to pdf using javascript, HTML to pdf in javascript using jsPDF.

jsPDF provides two different methods to use.

  1. Install using NPM
  2. jsPDF CDN File

Example:

In this step, we will create an HTML file. So, add the following code to the file.

<html>
    <h1>How To Convert HTML To PDF Using jsPDF- Techsolutionstuff</h1>
    <form class="form">        
        <table>  
            <tbody>  
                <tr>  
                    <th>Company Name</th>  
                    <th>Employee Name</th>  
                    <th>Country</th>  
                </tr>  
                <tr>  
                    <td>Dell</td>  
                    <td>Maria</td>  
                    <td>Germany</td>  
                </tr>  
                <tr>  
                    <td>Asus</td>  
                    <td>Francisco</td>  
                    <td>Mexico</td>  
                </tr>  
                <tr>  
                    <td>Apple</td>  
                    <td>Roland</td>  
                    <td>Austria</td>  
                </tr>  
                <tr>  
                    <td>HP</td>  
                    <td>Helen</td>  
                    <td>UK</td>  
                </tr>  
                <tr>  
                    <td>Lenovo</td>  
                    <td>Yoshi</td>  
                    <td>Canada</td>  
                </tr>
            </tbody>  
        </table><br>  
        <input type="button" id="generate_pdf" value="Generate PDF">  
    </form>  
</html>
Enter fullscreen mode Exit fullscreen mode

Now, add the style of this HTML page.

<style>
table {  
    font-family: arial, sans-serif;  
    border-collapse: collapse;  
    width: 100%;  
}  

td {  
    border: 1px solid #dddddd;  
    text-align: left;  
    padding: 8px;  
} 
th{
    border: 1px solid #dddddd;  
    text-align: left;  
    padding: 8px;  
    background-color: #111;  
    color:white;
}

tr:nth-child(odd) {  
    background-color: #dddddd;  
}
</style>
Enter fullscreen mode Exit fullscreen mode

Add the following script to the HTML page for converting it to pdf.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>  
<script>
$(document).ready(function () {  
    var form = $('.form'),  
    cache_width = form.width(),  
    a4 = [595.28, 841.89]; // for a4 size paper width and height  

    $('#generate_pdf').on('click', function () {  
        $('body').scrollTop(0);  
        generatePDF();  
    });  

    function generatePDF() {  
        getCanvas().then(function (canvas) {  
            var img = canvas.toDataURL("image/png"),  
             doc = new jsPDF({  
                 unit: 'px',  
                 format: 'a4'  
             });  
            doc.addImage(img, 'JPEG', 20, 20);  
            doc.save('tech-html-to-pdf.pdf');  
            form.width(cache_width);  
        });  
    }  

    function getCanvas() {  
        form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');  
        return html2canvas(form, {  
            imageTimeout: 2000,  
            removeContainer: true  
        });  
    }
});
</script>
Enter fullscreen mode Exit fullscreen mode

You might also like:

Top comments (0)