在表格之前和之后添加内容（jsPDF自动表格）

Question

i have a question to jsPDF autotable.

My Code:

    $('#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的最后一页，但在页面顶部而不是末尾，为什么？

对不起，我的英语不好。 感谢您的帮助。

- Basti G.

---

你看过 jspdf autotable 代码库中的内容示例吗？14 和 30 是文本的位置。尝试其他值，你就会看到不同之处。 - Simon Bengtsson

但是14和30是用来做什么的？宽度和高度吗？以毫米、像素、厘米为单位？我不能在没有给出位置的情况下将内容插入表格下面吗？有趣的是，当表格使用完整的边时，内容不会创建新的边.... :/ - Basti G.

Answer 1

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

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.

- Davids Gonzalez Tigrero

Answer 2

这是我的回答：
所以这是您的Autotable函数调用：

var pdf = new jsPDF('p', 'pt', 'a4');

由于jsPDF Autotables基于jsPDF，您需要前往此处：

pt是称为点的测量单位，因此14和30是点数。在第一个位置，14，向左和向右移动元素。第二个位置，30，向下和向上移动元素。我猜它们像像素(px)一样。似乎您必须使用点将文本移动到所需位置。

- hnewbie

Answer 3

一个帮助我的想法是在你想添加新表的位置放置一个没有内容的表格。

autoTable(doc, {
  body: [],
  startY: finalY + bias
});

- Jannik