jspdf中的嵌套表

如何解决jspdf中的嵌套表

我正在使用 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结果：