Clever Geek Handbook

JsPDF does not generate correct PDF

I have a table that looks like this:

enter image description here

I am using the below code trying to create a PDF when someone clicks the PDF button.

<script>
    var doc = new jsPDF();

    $('#pdf').click(function () {
        var specialElementHandlers = {
            '#editor': function (element, renderer) {
                return true;
            }
        };

        doc.fromHTML($('#pdfcontent').html(), 15, 15, {
            'width': 170,
            'elementHandlers': specialElementHandlers
        });

        doc.save('sample-file.pdf');
    });
</script>

The resulting PDF looks like this:

enter image description here

How can I get a PDF to mirror the website?

+3


source to share


2 answers


You shouldn't expect jsPDF to mirror the content of your HTML page as it parses the HTML to recreate the PDF content and parses the HTML early on (as pointed out by the official website ).



I would suggest using jsPDFTablePlugin , which can take input as an array of data objects and output it as a table in PDF.

0


source


I highly recommend switching to server side PDF generation. PhantomJS will make an almost perfect pixelated PDF for you with SVG and canvas support, and all the elements will still be vectors! You must try.



With client-side PDF generators like the aforementioned jsPDF, you are very limited and the end result is far from what you would expect.

0


source






More articles:


All Articles