How To Convert HTML To PDF using JavaScript

Websolutionstuff | Aug-23-2021 | Categories : jQuery HTML

In this example 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.So here, we will generate pdf using javascript.

JavaScript is the easiest way to converting html to pdf and there are various JavaScript library is available for generating PDF from HTML. jsPDF is one of the best library to convert HTML to PDF using JavaScript.

So, let's generate HTML to PDF using JavaScript.

First creating an HTML Page for converting the HTML to PDF. Add the following code in your HTML page.

<html>
    <h1>How To Convert HTML To PDF using JavaScript - Websolutionstuff</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>  
                <tr>  
                    <td>Accer</td>  
                    <td>Rovelli</td>  
                    <td>Italy</td>  
                </tr>  
            </tbody>  
        </table><br>  
        <input type="button" id="create_pdf" value="Generate PDF">  
    </form>  
</html>

 

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>

 

Add the following script in 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>

 

And finally you will get output like below screenshot when click Generate PDF button.

How To Convert HTML To PDF using JavaScript


 

You may also like :

Recommended Post
Featured Post
How To Add Bootstrap Modal In React JS
How To Add Bootstrap Modal In...

In this article, we will see how to add a bootstrap modal in react js. In this example, we will use the bootstrap m...

Read More

Sep-09-2022

Login with Mobile Number using Laravel Custom Auth
Login with Mobile Number using...

In this tutorial i will show you how to login with mobile number in laravel using Laravel Custom Auth , laravel pro...

Read More

Jun-18-2021

How To Use Google Recaptcha V2 In Laravel 9
How To Use Google Recaptcha V2...

In this article, we will see how to use google ReCaptcha v2 in laravel 9. Google ReCaptcha is used for advance...

Read More

Jun-14-2022

Laravel 8 Yajra Datatable Example Tutorial
Laravel 8 Yajra Datatable Exam...

In this article, we will see the laravel 8 yajra datatable example tutorial. Datatable provides users to many...

Read More

Sep-30-2020