Jspdf中的嵌套表

我正在使用jspdf开发一个表。 我尝试将Autotable放在Autotable中。 问题是表的行没有动态调整到插入的表的高度。 然后它重叠到下一行。

这是我的代码。

doc.autoTable({ html: '#table', 
                      theme:'grid', 
                      overflow: 'linebreak',
                      bodyStyles: {lineColor:[0, 0, 0], 
                                   textColor:[0, 0, 0]}, 
                                   startX: 15, 
                                   startY: 50, 
                                   styles:{font:'noto'}, 
                                   headStyles : { halign: 'center', 
                                                  textColor: [0, 0, 0], 
                                                  fillColor:[255, 255, 255], 
                                                  lineWidth: 0.1, 
                                                  lineColor:[0, 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', 
                                          theme:'grid', 
                                          overflow: 'linebreak',
                                          bodyStyles: {lineColor:[0, 0, 0],
                                                        textColor:[0, 0, 0]
                                                      },
                                          styles:{font:'noto'},
                                          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, 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结果：