jspdf - 在表格前后添加内容(jsPDF autotable)

Question

我对 jsPDF autotable 有疑问。

我的代码:

    $('#printBtn').on('click', function() {
    var pdf = new jsPDF('p', 'pt', 'a4');
    var res = pdf.autoTableHtmlToJson(document.getElementById("tablePrint"));

    pdf.autoTable(res.columns, res.data, {
        theme : 'plain',
        styles: {
            fontSize: 12
        },
        showHeader: 'never',
        createdCell: function(cell, data) {
            var tdElement = cell.raw;
            if (tdElement.classList.contains('hrow')) {
                cell.styles.fontStyle = 'bold';
            }
        }
    });

    pdf.save("test.pdf");
});

我想在 div 的表格之前和之后添加文本。
我在 jsPDF 自动表示例中找到了这个代码片段:

    var before = "text before";
    pdf.text(before, 14, 30);

这段代码效果很好。我在 pdf.autoTable(...}); 之前插入了它。
但我不知道数字 14 和 30 是什么意思？

然后我在 pdf.autoTable 函数调用之后插入了代码，并且文本打印在 pdf 的最后一页但在页面的顶部，而不是在最后，为什么？

抱歉我的英语不好。
感谢帮助。

Answer 1

如果您想要在必须首先移动要使用 autotable 添加的表之前添加一些内容，您可以通过添加 startY: 150 来实现这一点。 doc.autotable 中的属性:

pdf.autoTable(res.columns, res.data, {
  theme : 'plain',
  styles: {
    fontSize: 12
  },
  startY: 150,
  showHeader: 'never',
  createdCell: function(cell, data) {
    var tdElement = cell.raw;
    if (tdElement.classList.contains('hrow')) {
      cell.styles.fontStyle = 'bold';
    }
  }
});

150 是您要移动的像素值。在此之上，您可以使用您放置的代码放置您想要的文本。

var before = "text before";
pdf.text(before, 14, 30);

现在 14(Y 中的值)和 30(Y 中的值)的值是您希望文本以像素为单位移动的值。

为了在表格后添加文本，您必须首先获得表格结束的像素数，然后从那里输入您想要的文本。

  let finalY = pdf.previousAutoTable.finalY; //this gives you the value of the end-y-axis-position of the previous autotable.
  pdf.text("Text to be shown relative to the table", 12, finalY + 10); //you use the variable and add the number of pixels you want it to move.