Add content before and after table (jsPDF autotable)

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");
});

I want add Text before and after the Table from a div. I have found this Code Snippet in jsPDF autotable examples:

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

This code works good. I have insert that before pdf.autoTable(...});. But i dont know what the number 14 and 30 for?

Then i have the code insert after the pdf.autoTable function call and the Text printed on the last page of pdf but on the top of the page, not on the end, why?

Sorry for my bad englisch. Thanks for help.

Answer 1

If what you want is to add something before you must first move the table that you are adding with autotable, you achieve this by adding a startY: 150 attribute within 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 is the value in pixels you want to move. Above this you can place the text you want with the code you placed.

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

Now the values of 14 (Value in Y) and 30 (Value in Y) are the values that you want the text to move in pixels.

In order for you to add text after the table you must first obtain in which number of pixels your table ended and from there enter the text you want.

  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.