將html表格導出為PDF並保留表格外觀

Question

我有下表：

 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> 

有沒有可以用來將表格導出為PDF並保留其結構並在上面的示例中顯示外觀的插件？ 到目前為止，我已經嘗試過使用jspdf但是沒有設法保留表結構，而我在stackoverflow上看到的示例也沒有做到這一點。 有人可以給我指出一個如何將表格導出為PDF並保留表格外觀的有效示例，或者向我展示如何完成此操作嗎？

Answer 1

這是一個使用@cloudformatter（請參閱http://www.cloudformatter.com/CSS2Pdf ）的方法，只需在上面輸入您的內容並創建此小提琴即可：

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

添加打印代碼，如下所示：

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

結果：