CODEWITHSUNDEEP
javascripthtmlpdfjspdfjspdf-autotable
confusedChris
confusedChris

Reputation: 93

jsPDF Autotable add Title above each teable

I am using jsPDF Autotable to produce a pdf document with multiple tables. function generate() {

  var doc = new jsPDF('l', 'pt', 'a3');

var res = doc.autoTableHtmlToJson(document.getElementById('predicts'));
doc.autoTable(res.columns, res.data,{
styles: { overflow: 'linebreak', columnWidth: 65 }  
});

var res2 = doc.autoTableHtmlToJson(document.getElementById('EMPPredict'));
doc.autoTable(res2.columns, res2.data, {
    startY: doc.autoTableEndPosY() + 10,
    styles: { overflow: 'linebreak', columnWidth: 65 },
});


var res3 = doc.autoTableHtmlToJson(document.getElementById('Nonepredict'));
doc.autoTable(res3.columns, res3.data, {
    startY: doc.autoTableEndPosY() + 10,
    styles: { overflow: 'linebreak', columnWidth: 65 }
});
var res4 = doc.autoTableHtmlToJson(document.getElementById('E2EPredict'));

doc.autoTable(res4.columns, res4.data, {
    startY: doc.autoTableEndPosY() + 10,
    styles: { overflow: 'linebreak', columnWidth: 65 }
});

I am trying to figure out without any success how to add a title to each table.

I am able to add a title to the document at the top and the footer but is there a way of adding a title above each table?

Thanks in advance doc.save("EOD_Results.pdf");

Upvotes: 0

Views: 13156

Answers (1)

Simon Bengtsson
Simon Bengtsson

Reputation: 8151

You can add content anywhere on the page as you want. You can take a look at this example for example: https://simonbengtsson.github.io/jsPDF-AutoTable/#long

doc.text(7, 15, "Overflow 'ellipsize' (default)");
doc.autoTable(columnsLong, getData(), {
    startY: 20,
    margin: {horizontal: 7},
    styles: {columnWidth: 'wrap'},
    columnStyles: {text: {columnWidth: 'auto'}}
});

doc.text("Overflow 'hidden'", 7, doc.autoTable.previous.finalY + 10);
doc.autoTable(columnsLong, getData(), {
    startY: doc.autoTable.previous.finalY + 15,
    margin: {horizontal: 7},
    styles: {overflow: 'hidden', columnWidth: 'wrap'},
    columnStyles: {text: {columnWidth: 'auto'}}
});

Upvotes: 5

Related Questions