将html表格导出为PDF并保留表格外观

Question

I have the following table:

 var currencySymbol = '£' var total = 0.0; $('table tbody tr:gt(0) td:nth-child(4)').each(function() { total += parseFloat($(this).html().replace(currencySymbol, '')); }); total += currencySymbol; var $newTR = $("<tr><td colSpan='3'></td><td>"+total+"</td><td></td></tr>"); $('table tbody').append($newTR); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/> <table class="table table-bordered"> <tbody> <tr> <td>Timestamp</td> <td>Cash &amp; Carry</td> <td>Shop Name</td> <td>Amount</td> <td>Comments</td> </tr> <tr> <td>10/01/2018</td> <td>New Delhi Cash &amp; Carry</td> <td>J's Pizza Stop </td> <td>72.75£</td> <td>PAID 2018-01-11 16:53 Full Amount: 75 Discount of 3% Discount Total: 2.25</td> </tr> <tr> <td>13/01/2018</td> <td>New Delhi Cash &amp; Carry</td> <td>Mexican House</td> <td>93.42£</td> <td>PAID 2018-01-18 10:08 Full Amount: 96.31 Discount of 3% Discount Total: 2.8893</td> </tr> <tr> <td>14/01/2018</td> <td>New Delhi Cash &amp; Carry</td> <td>Mexican House</td> <td>67.08£</td> <td>PAID 2018-01-18 10:05 Full Amount: 69.15 Discount of 3% Discount Total: 2.0745</td> </tr> <tr> <td>18/01/2018</td> <td>New Delhi Cash &amp; Carry</td> <td>Mexican House</td> <td>94.00£</td> <td>PAID 2018-01-25 10:34 Full Amount: 96.91 Discount of 3% Discount Total: 2.9073</td> </tr> <tr> <td>19/01/2018</td> <td>New Delhi Cash &amp; Carry</td> <td>Mexican House</td> <td>48.50£</td> <td>PAID 2018-01-25 10:34 Full Amount: 50 Discount of 3% Discount Total: 1.5</td> </tr> <tr> <td>20/01/2018</td> <td>New Delhi Cash &amp; Carry</td> <td>Mexican House</td> <td>34.85£</td> <td>PAID 2018-01-25 10:33 Full Amount: 35.93 Discount of 3% Discount Total: 1.0779</td> </tr> <tr> <td>25/01/2018</td> <td>New Delhi Cash &amp; Carry</td> <td>Eastham Express</td> <td>212.97£</td> <td>PAID 2018-02-01 10:51 Full Amount: 219.56 Discount of 3% Discount Total: 6.5868</td> </tr> <tr> <td>03/02/2018</td> <td>New Delhi Cash &amp; Carry</td> <td>J's Pizza Stop </td> <td>14.55£</td> <td>Full Amount: 15 Discount of 3% Discount Total: 0.45</td> </tr> </tbody> </table> 

Is there a plugin that I can use to export the table to a PDF and preserve its structure and look the way it looks in the example above? So far I've tried using jspdf but didn't manage to preserve the table structure and the examples I've seen on stackoverflow haven't manage to do that as well. Can someone point me to a working example of how to export the table to a PDF and preserve the table's look or show me how such a thing can be done?

Answer 1

Here's one, using @cloudformatter (see http://www.cloudformatter.com/CSS2Pdf ) Just took your input above and created this fiddle:

http://jsfiddle.net/zvx6eb7e/665/

Add the code for print, like this:

var click="return xepOnline.Formatter.Format('JSFiddle', 
{render:'download'})";
jQuery('#buttons').append('<button onclick="'+ click +'">PDF</button>');

Result: