DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

How To Convert HTML To PDF Using JavaScript

In this article, we will see how to convert HTML to PDF using JavaScript. PDF file format is very useful to download bulk data in the web application. It helps the user to download dynamic content in file format for offline use with export to PDF functionality. JavaScript is the easiest way to convert HTML to PDF and there are various JavaScript library is available for generating PDF from HTML. jsPDF is one of the best libraries to convert HTML to PDF using JavaScript.

So, let's see generate PDF using javascript, convert HTML to PDF using jquery, jspdf HTML to PDF, HTML to PDF javascript, jquery convert HTML to PDF, jspdf convert HTML to PDF.

Example: How To Convert HTML To PDF Using JavaScript

First, we will create an HTML Page for converting the HTML to PDF. Add the following code to your HTML page.

<html>
    <h1>How To Convert HTML To PDF Using JavaScript - 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="create_pdf" value="Generate PDF">  
    </form>  
</html>
Enter fullscreen mode Exit fullscreen mode

Read Also: How To Disable Right Click Using jQuery


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

Read Also: jQuery Image Magnifier on Mouse Hover


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  

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

    function createPDF() {  
        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('Bhavdip-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)

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs