How To Convert HTML To PDF using JavaScript

In this blog, I will demonstrate how to generate PDF file of your HTML page with CSS using JavaScript and jQuery. We have to add two external JS files for converting the PDF -  JSPDF.js and html2canvas.js.

Creating an HTML Page for converting the HTMl to PDF

Add the following table in your HTML page.

<form class="form" style="max-width: none; width: 1005px;">  
        <h2 style="color: #0094ff">Hello</h2>  
        <h3>a bit about this Project:</h3>  
        <p style="font-size: large">  
            I will demonstrate how to generate PDF file of your HTML page with CSS using JavaScript and J query.  
                    <td>Alfreds Futterkiste</td>  
                    <td>Maria Anders</td>  
                    <td>Centro comercial Moctezuma</td>  
                    <td>Francisco Chang</td>  
                    <td>Ernst Handel</td>  
                    <td>Roland Mendel</td>  
                    <td>Island Trading</td>  
                    <td>Helen Bennett</td>  
                    <td>Laughing Bacchus Winecellars</td>  
                    <td>Yoshi Tannamuri</td>  
                    <td>Magazzini Alimentari Riuniti</td>  
                    <td>Giovanni Rovelli</td>  

Add the style of this HTML page.

        table {  
            font-family: arial, sans-serif;  
            border-collapse: collapse;  
            width: 100%;  
        td, th {  
            border: 1px solid #dddddd;  
            text-align: left;  
            padding: 8px;  
        tr:nth-child(even) {  
            background-color: #dddddd;  

Add the “Print” button in this page, above the form tag.

<input type="button" id="create_pdf" value="Generate PDF">  

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

<script src="" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>  
   <script src=""></script>  

Add other two scripts for converting the document.

    (function () {  
         form = $('.form'),  
         cache_width = form.width(),  
         a4 = [595.28, 841.89]; // for a4 size paper width and height  
        $('#create_pdf').on('click', function () {  
        //create pdf  
        function createPDF() {  
            getCanvas().then(function (canvas) {  
                 img = canvas.toDataURL("image/png"),  
                 doc = new jsPDF({  
                     unit: 'px',  
                     format: 'a4'  
                doc.addImage(img, 'JPEG', 20, 20);  
        // create canvas object  
        function getCanvas() {  
            form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');  
            return html2canvas(form, {  
                imageTimeout: 2000,  
                removeContainer: true  
 * jQuery helper plugin for examples and tests 
    (function ($) {  
        $.fn.html2canvas = function (options) {  
            var date = new Date(),  
            $message = null,  
            timeoutTimer = false,  
            timer = date.getTime();  
            html2canvas.logging = options && options.logging;  
            html2canvas.Preload(this[0], $.extend({  
                complete: function (images) {  
                    var queue = html2canvas.Parse(this[0], images, options),  
                    $canvas = $(html2canvas.Renderer(queue, options)),  
                    finishTime = new Date();  
                    $canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);  
                    $(window).click(function () {  
                        if (!$':visible')) {  
                            throwMessage("Canvas Render visible");  
                        } else {  
                            throwMessage("Canvas Render hidden");  
                    throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);  
            }, options));  
            function throwMessage(msg, duration) {  
                timeoutTimer = window.setTimeout(function () {  
                    $message.fadeOut(function () {  
                }, duration || 2000);  
                if ($message)  
                $message = $('<div ></div>').html(msg).css({  
                    margin: 0,  
                    padding: 10,  
                    background: "#000",  
                    opacity: 0.7,  
                    position: "fixed",  
                    top: 10,  
                    right: 10,  
                    fontFamily: 'Tahoma',  
                    color: '#fff',  
                    fontSize: 12,  
                    borderRadius: 12,  
                    width: 'auto',  
                    height: 'auto',  
                    textAlign: 'center',  
                    textDecoration: 'none'  

Now, let’s see the output.

This is image title

Click on the "Generate PDF " button and get the PDF file like this.

This is image title


You can easily add the Export to PDF functionality in the web page without depending on the server-side script. The PDF creation functionality can be enhanced with jsPDF configuration options as per your needs. Thank you for reading !

#JavaScript #HTML #PDF #Convert

How To Convert HTML To PDF using JavaScript
2 Likes1.04K GEEK