How to detect height jsPDF-AutoTable

0
votes

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?

2
jspdfjspdf-autotable

2 Answers

1
votes

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.

0
votes

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