如何检测高度jsPDF-AutoTable

Question

我使用jspdf autotable plugin (jspdf.plugin.autotable.js和jspdf.min.js)来制作表格网格视图。下面是我的代码：

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)

当我做alert(doc.height)的时候，我得到了“未定义的”。这并不是我所期望的。当表格包含大数据时，如何检测表格高度？

Answer 1

每次绘制单元格时，都可以使用提供的hooks设置新的表格高度，如下所示：

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)

现在上面的实现工作到v2.3.5，v3在4天前才预发布(在写这篇文章的时候)，然后这个钩子将被删除。此时，看起来您可以使用新的钩子：didParseCell，如下所示：

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)

请注意，v3中也将删除addPageContent。其他事情可能仍然会改变，如果你决定升级，请检查你的实现。

Answer 2

尝试在didParseCell挂钩中设置高度不起作用。您可以从该钩子捕获数据，并在表完成后获取高度。

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

Answer 3

使用didDrawPage钩子传递如下所示的函数来获取表格的结束高度。

autoTable(doc, {
  ...,
  didDrawPage: (d) => console.log(d.cursor.y),
};