JsPDF在每个新页面上重复第一行

时间:2018-10-12 12:50:11

标签: javascript angularjs html5

我正在使用jspdf保存PDF。我的HTML中有表格,但表格没有标题。但是JsPDF的功能是自动在每页上重复表格的第一行,并且它们是重叠的。每个新页面上的页眉。有没有办法做到。附上page的屏幕快照。谢谢!!!

$scope.SavePage = function() {
    var doc = new jsPDF('p', 'pt', 'a4', true);
    margins = {
        top: 200,
        bottom: 60,
        left: 40,
        width: 522
    };
    specialElementHandlers = {
        '#ignoreComponent': function(element, renderer) {
            return true
        },
        '#ignorePage': function(element, renderer) {
            return true
        }
    };

var source = $('#pageInformationPdf')[0];

doc.fromHTML(source, margins.left, margins.top, {
        'width': margins.width,
        'pagesplit': true,
        'elementHandlers': specialElementHandlers
    },
    function(dispose) {
        doc.save(pageName + '.pdf');
        }, margins);

}

2 个答案:

答案 0 :(得分:0)

您可以使用drawHeaderRow挂钩。下面是示例代码

function generate() {
  var doc = new jsPDF('p', 'pt');
  var elem = document.getElementById('table');
  var data = doc.autoTableHtmlToJson(elem);

  //Do not print the header if current page not the first page.
  doc.autoTable(data.columns, data.rows, {
    drawHeaderRow: function(row, data) {
      if (data.pageCount > 1) {
        return false;
      }
    }
  });

  doc.save("table.pdf");
}  

html

<button onclick="generate()">Generate PDF</button>

<table id="table" style="display: none;">
    <thead>
    <tr>
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Email</th>
        <th>Country</th>
        <th>IP-address</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td align="right">1</td>
        <td>Donna</td>
        <td>Moore</td>
        <td>dmoore0@furl.net</td>
        <td>China</td>
        <td>211.56.242.221</td>
    </tr>
    <tr>
        <td align="right">2</td>
        <td>Janice</td>
        <td>Henry</td>
        <td>jhenry1@theatlantic.com</td>
        <td>Ukraine</td>
        <td>38.36.7.199</td>
    </tr>
    </tbody>
</table>

答案 1 :(得分:0)

对于较新的版本(3.x.x),您可以使用willDrawCell挂钩。 例如,仅隐藏标题(可以应用其他逻辑):

willDrawCell (HookData) {
  if (HookData.section === 'head') {
    return false
  }
},