5

我对 jsPDF 自动表有疑问。

我的代码：

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

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

4

2 回答 2

10

如果您想要在必须首先使用 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.
于 2020-02-20T23:34:05.457 回答
1

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

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

由于 jsPDF Autotables 是基于 jsPDF，你必须去这里：

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

于 2017-11-17T19:13:35.133 回答