在表格前后添加内容（jsPDF 自动表格）答案

【问题标题】：Add content before and after table (jsPDF autotable)在表格前后添加内容（jsPDF 自动表格）
【发布时间】：2017-11-16 11:00:07
【问题描述】：

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

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

【问题讨论】：

您看过 jspdf 自动表存储库中的内容示例吗？ 14 和 30 是文本的位置。尝试其他值，您会看到差异。
但是 14 和 30 是什么？宽度和高度？以毫米、像素、厘米为单位？如果没有给出位置，我不能在表格下插入内容吗？它很好奇，因为当表格使用完整的一面时，内容不会创建新的一面......：/

标签： jspdf jspdf-autotable

【解决方案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.

【讨论】：

【解决方案2】：

这是我的答案：
所以这是你的 Autotable 的函数调用：

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

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

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

【讨论】：