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>');

结果：

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

1 个答案: