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.

Have you seen the content examples in the jspdf autotable repository? The 14 and 30 are the positions of the text. Try out other values and you can see the difference. — Simon Bengtsson
But for what is the 14 and for what the 30? Width and Height? In mm, pixel, cm? Can't i insert the content under the table without given the positions? Its curious because when the table used the complete side the content not create a new side.... :/ — Basti G.

Davids Gonzalez Tigrero Davids Gonzalez Tigrero · Accepted Answer · 2020-02-20T23:34:05

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.

Add content before and after table (jsPDF autotable)

2 Answers