如何检测高度jsPDF-AutoTable答案

【问题标题】：How to detect height jsPDF-AutoTable如何检测高度jsPDF-AutoTable
【发布时间】：2018-11-29 06:56:36
【问题描述】：

我正在使用 jspdf 自动表格插件（jspdf.plugin.autotable.js 和 jspdf.min.js）在 PDF 文档中制作表格网格视图。这是我的代码如下：

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)我得到“未定义”。这不是我的预期。表格包含大数据时如何检测表格高度？

【问题讨论】：

标签： jspdf jspdf-autotable

【解决方案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)

请注意，addPageContent 也将在 v3 中删除。其他事情可能仍会发生变化，如果您决定升级，请检查您的实施。

【讨论】：

所以这段代码用于 jspdfautotable 版本 2.xx createdCell: function (cell, data) { height = data.table.height }
我正在使用 jspdf 版本 2.xx 并按照上面的说明进行操作。没有变化。我在警报消息中得到 0

【解决方案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);

【讨论】：

【解决方案3】：

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

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

【讨论】：