How to detect height jsPDF-AutoTable - jspdf

Question

I am using jspdf autotable plugin (jspdf.plugin.autotable.js and jspdf.min.js)
to make table grid view in PDF document.
this is my code bellow:
var listpaket2 = '<?php echo json_encode($new_array_list_paket_min_15_persen); ?>'
var columns = ["Nama Balai","Kode Satker","Kode PPK","Nama "];
var rows = jQuery.parseJSON(listpaket2); //listpaket2 contains dynamic big data, it is about 5000 rows of record
doc.autoTable(columns, rows, {
styles: {fillColor: [100, 255, 255]},
columnStyles: {
id: {fillColor: 255}
},
addPageContent: function(data) {
}
});
alert(doc.height)
when I am doing alert(doc.height)I got "undefined". that is not as my expectation.
How to detect table height when table contains big data?

Answer 1

You can set the new table height each time a cell was drawn, using the provided hooks like this:
var height = 0;
doc.autoTable(columns, rows, {
styles: {fillColor: [100, 255, 255]},
columnStyles: {
id: {fillColor: 255}
},
addPageContent: function(data) {},
createdCell: function (cell, data) {
height = data.table.height
}
});
alert(height)
Now the above implementation works up to v2.3.5, v3 was pre-release only 4 days ago (at time of writing), then this hook will be removed. At this time it looks like you can use the new hook : didParseCell like this:
var height = 0;
doc.autoTable(columns, rows, {
styles: {fillColor: [100, 255, 255]},
columnStyles: {
id: {fillColor: 255}
},
didParseCell: function (HookData) {
height = HookData.table.height
}
});
alert(height)
Note that addPageContent will also be removed in v3. Other things might still change, check your implementation if you decide to upgrade.

Answer 2

Use the didDrawPage hook passing a function like below to get the ending height of the table.
autoTable(doc, {
...,
didDrawPage: (d) => console.log(d.cursor.y),
};

Answer 3

Trying to set the height within the didParseCell hook did not work. You can capture the data from that hook and get the height after the table finishes.
let height = 0;
let tableMeta = null;
doc.autoTable(columns, rows, {
styles: {fillColor: [100, 255, 255]},
columnStyles: {
id: {fillColor: 255}
},
didParseCell: (data) => {
if (!tableMeta) {
tableMeta = data.table;
height = data.table.height; // <- doesn't work, sets height to 0
}
}
});
// Calculate the table height
height = tableMeta.finalY - tableMeta.pageStartY;
// Or the final Y position after drawing the table if that's what you need
height = tableMeta.height;
alert(height);