I have a table that looks like:
I am using the below code in attempt to generate a PDF when someone clicks on 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:
How can I get the PDF to be a mirror image of the website?
You should not expect jsPDF to mirror the content of your HTML page as it parses the HTML to recreate the content as PDF and the HTML parser is at early stage (as stated on the official web-site).
I would suggest to use jsPDFTablePlugin that may take input as array of objects with data and draw them as a table into PDF.
I strongly recommend switching to server-side PDF generation. PhantomJS will do almost pixel perfect PDF for you with svg and canvas support and all elements will still remain as vectors! You should give it a try.
With client side PDF generators, such as mentioned jsPDF you're very limited and the final result will be far away from what you expect to have.