问题描述
我正在使用 jspdf 开发表格。 我尝试将 autotable 放在 autotable 中。 问题是表格的行没有动态调整到插入表格的高度。 然后它重叠到下一行。
这是我的代码。
doc.autoTable({ html: '#table',theme:'grid',overflow: 'linebreak',bodyStyles: {lineColor:[0,0],textColor:[0,0]},startX: 15,startY: 50,styles:{font:'noto'},headStyles : { halign: 'center',textColor: [0,fillColor:[255,255,255],linewidth: 0.1,lineColor:[0,0]
},didDrawCell: function (data) {
if (data.cell.section === 'body' && data.column.index === 1 && data.row.index === 9) {
document.getElementsByClassName("confluenceTable")[0].id = 'confluenceTable';
console.log("------test----")
console.log(document.getElementById("confluenceTable"))
data.cell.text = "";
doc.autoTable({
html: '#confluenceTable',0]
},startY: data.cell.y + 2,margin: {left: data.cell.x + data.cell.padding('left')},tableWidth: 'wrap',})
}
},didParseCell: function (data) {
if (data.cell.section === 'body' && data.column.index === 1 && data.row.index === 9) {
data.cell.text = "";
}
},//,columnStyles: {0: {fillColor: [212,212,212]},tableLineColor: [0,0]}
});
这是我的结果
解决方法
在创建嵌套表格之前，您必须在 didParseCell 事件中设置父单元格的最小高度并清除内容。并在 didDrawCell 事件中添加嵌套表作为额外内容。
这是一个在一个单元格中包含一个 HTML 表格和嵌套表格的示例。计算的高度是假设行的高度都相等。 （打字稿）
...
this.yPos = 0;
this.createAutoTable(myTableNode,{ startY: this.yPos + 20 })
...
/**
* create the autotable with the plugin
*/
private createAutoTable(tableNode,tableStyle = {}): void {
this.autoTable(this.doc,{
...tableStyle,html: tableNode,// event that can be used to override content or styles for a specific cell
didParseCell: data => {
const rawNode = data.cell.raw as HTMLTableCellElement;
const nestedTable = rawNode.querySelector('table');
if (nestedTable) {
this.prepareCellForNestedTable(data.cell,nestedTable);
}
},// event to add additional cell content
didDrawCell: data => {
const rawNode = data.cell.raw as HTMLTableCellElement;
const nestedTable = rawNode.querySelector('table');
// if there is a nested table draw that table
if (nestedTable) {
const subTableStyle = {
html: nestedTable,startY: data.cell.y + 4,margin: { left: data.cell.x + 4 },tableWidth: data.cell.width - 4
};
this.createAutoTable(nestedTable,subTableStyle)
}
});
// @ts-ignore
this.yPos = this.doc.lastAutoTable.finalY + 10;
}
/**
* if there is a nested table inside a cell then clear the content and set the height of the cell
*/
private prepareCellForNestedTable(cell,nestedTable: HTMLTableElement) {
cell.styles.minCellHeight = this.getTotalRows(nestedTable) * 11; // calc how many rows are needed?
cell.text = [];
}
/**
* Count total rows of nested table for calculating the height of primary table (assumption 1 row height cells)
*/
private getTotalRows(table): number {
return table.querySelectorAll('tr').length;
}
这是html渲染：
这是pdf结果：
