在 PDF table 的每个页面中显示两个默认行

Question

我一直在尝试生成如下所示的 PDF 表格 -

在这里，我想在每页的第一行显示与上一页中打印的行的总距离。以及与该页最后一行打印的行的总距离。公式可以用以下等式描述：

distances_from_previous = total of values of column **Distance (KM)** printed at previous page
distances_carried_forward = total of values of column **Distance (KM)** printed at current page + distance_from_previous_page

我为此使用了 jsPDF-AutoTable plugin。我的问题是我找不到计算 PDF 打印行数的方法。

我想到了另一种实现方式。我可以强制 jsPDF 在单个页面中绘制一定数量的行。但是我不知道如何指示jsPDF来做这个技巧。

如有任何帮助，我们将不胜感激。

Answer 1

一种方法是通过预先计算值

<!DOCTYPE html>
<html>
<head>
<title>JS PDF experiment</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.5/jspdf.plugin.autotable.js"></script>

<script>
    function demoFromHTML() {

  var doc = new jsPDF('p', 'pt','a4');
  //for a4 size paper 33 rows can fit with current settings
  //so we will reserve 2 rows for additional data 
  //and other 31 rows will be used as normal row data

     var oldDistance = 0;
     var currentDistance = 0;

     var columns = [
      "Date","Time","Distance (KM)"
     ];
     //data creation
     var rows = [];
     var limit = 1000;
     for(var i=0;i<limit;++i){
      var d = Number(Number(Math.random() * 10).toFixed(2));

      if(i%31 === 0){
       rows.push(["","Distance from previous",oldDistance.toFixed(2)]);
      }

      rows.push([ (i+1) +". 28/10/2011","10:00 AM",d]);
      currentDistance = currentDistance+ d;

      if(i%31 === 30 || i===(limit-1)){
       oldDistance = currentDistance;
       rows.push(["","Distance carried towards",currentDistance.toFixed(2)]); 
      }
     }

  doc.autoTable(columns, rows, {
      margin: {top: 60}
  });
  doc.save('Table1.pdf');
}
</script>

</head>

<body>

<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
</div>


</body>
</html>

现场演示 - https://jsfiddle.net/mkawserm/0bg8cpft

另一种方式，但格式不正确

<!DOCTYPE html>
<html>
<head>
<title>JS PDF experiment</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.5/jspdf.plugin.autotable.js"></script>

<script>
    function demoFromHTML() {
     var oldDistance = 0;
     var currentDistance = 0;
     var pageCount = 0;

     var columns = [
      "Date","Time","Distance (KM)"
     ];



     var rows = [];
     for(var i=0;i<1000;++i){
      var d = Number(Number(Math.random() * 10).toFixed(2));
      rows.push([ (i+1) +". 28/10/2011","10:00 AM",d]);
     }
 
  var doc = new jsPDF('p', 'pt','a4');
  doc.autoTable(columns, rows, {
      
      margin: {top: 60},
      
      addPageContent: function(data) {
       doc.text("Distance from previous: "+oldDistance.toFixed(2)+" KM", 300, 15);
          doc.text("Distance carried towards: "+currentDistance.toFixed(2)+" KM", 300, 810);
      },
      drawRow: function (row, data) {
       if(data.pageCount !== pageCount){
        pageCount = data.pageCount;
        oldDistance = currentDistance;
        currentDistance = oldDistance+row.raw[2];
       }
       else{
        currentDistance = currentDistance + row.raw[2];
       }
      }
  });
  doc.save('Table2.pdf');
}
</script>

</head>

<body>

<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
</div>


</body>
</html>

现场演示 - https://jsfiddle.net/mkawserm/12ftobda

在 PDF table 的每个页面中显示两个默认行

Showing two default rows in every page in table in PDF

javascript

jspdf

jspdf-autotable