Unable to convert HTML to PDF using jsPDF

Question

I'm able to download a PDF using jsPDF but the downloaded PDF is plain text excluding the styles applied in the website.

I am unable to get the styles or formatting in the website to the downloadable PDF.

Here's the jsPDF code I use:

       <button type="button" onclick="convert()" class="pda-button"><i class="save-icon sprite"></i> Save</button>

        <div  id="content">
          //content goes 
        </div>
        <div id="elementH"></div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://demos.codexworld.com/includes/js/bootstrap.js"></script>
    <script src="http://demos.codexworld.com/3rd-party/jsPDF/dist/jspdf.min.js"></script>  

        <script>
    function convert() {
        var doc = new jsPDF();
        var elementHTML = $('#content').html();
        var specialElementHandlers = {
            '#elementH': function (element, renderer) {
                return true;
            }
        };
        doc.fromHTML(elementHTML, 15, 15, {
            'width': 170,
            'elementHandlers': specialElementHandlers
        });

        // Save the PDF
        doc.save('sample-document.pdf');
    }
    </script>

Here's the link to website I integrated the above code and want to convert to PDF: Website's link

As I click on save button on the top left of the site to download PDF, the PDF is generated and downloaded but as an plain text PDF with no styles.

And Please do not Down-Vote the post without explaining the reason for doing so..

Answer 1

You need to give a callback function to the method doc.fromHTML

doc.fromHTML(elementHTML, 15, 15, {
        'width': 170,
        'elementHandlers': specialElementHandlers
    }, function cb() {} );

cb() will tell you that the pdf is ready.