问题描述
我正在尝试动态获取我使用 jsPDF 和 js Autotable 创建的 PDF 中表格的高度。我想在表格下方添加一行文本,但是由于表格高度发生变化,我无法为文本行添加特定的 Y 值。
我当前的表脚本:
let col = ['Header 1','Header 2','Header 3']
let rows = arrayForTable;
let getTableWidth = 150;
let pageWidth = doc.internal.pageSize.width;
let tableMargin = (pageWidth - getTableWidth) / 2;
let height = 0;
doc.autoTable(col,rows,{
margin: {top: 20,right: tableMargin,left: tableMargin},startY: 70,styles: {
halign: 'center',overflow: 'linebreak',cellWidth: 'wrap',valign: 'middle'
},columnStyles: {
0: {cellWidth: 50},1: {cellWidth: 50},2: {cellWidth: 50},},headStyles: {
fillColor: [163,32,32]
},didParseCell: function(data) {
if (data.row.index === rows.length - 1) {
data.cell.styles.fillColor = [63,63,64];
data.cell.styles.fontStyle = 'bold';
data.cell.styles.textColor = [255,255,255];
}
height = data.table.height
}
});
console.log(height)
控制台打印 undefined。任何人都知道如何在此表下动态添加一行文本,而无需像这样指定静态 Y 值:
doc.text(25,40,exampleText);
由于显示的数据不同,表格高度每次都会发生变化。
我使用的是 jsPDF AutoTable 插件 v3.5.6。
解决方法
据我了解,您想在表格下方添加文本。您可以读取最后一个单元格 Y 位置,而不是尝试读取表格高度。你需要做的是这样
let height = 0;
....
didParseCell: function(data) {
...
height = data.cursor.y + data.row.height;
}
....
然后可以调整要添加的文字的位置,例如我想在表格和文字之间添加10
间隙
doc.text("exampleText",25,height + 10);
,
使用
获取光标在Y轴上的位置didDrawPage
这将正好在桌子之后。 这在 Angular 2 中对我有用:
let yPos = 0;
pdf.autoTable({
...
didDrawPage: function(data) {
yPos = data.cursor.y;
}
}
jspdf 版本:
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",