Angular中不操作DOM处理ElementRef实现PDF分页导出的方案咨询

我有一个近200行的格式化HTML表格，需要用jsPDF库导出为PDF。当前代码如下：

makePdf() {
    var elWidth = this.el.nativeElement.getBoundingClientRect().width
    var elHeight = this.el.nativeElement.getBoundingClientRect().height
    this.loadingSubject.next(true)
    this.zone.run(() => {
    let pdf = new jsPDF({
      orientation: 'l',
      unit: 'px',
      format: [elWidth, elHeight],
      compress:true
    });
    pdf.html(element.nativeElement, {
      callback: (pdf) => {
        pdf.save('sample.pdf');
      }
    })
    })
}

目前导出的PDF会默认按高度分页，导致表格行被截断拆分到下一页。我希望将每13行拆分为带有<table>、<thead>标签的独立表格，实现每页一个表格的效果。但修改el.nativeElement会影响页面DOM，请问在Angular中有没有办法获取HTML并修改，同时不操作DOM？

核心思路：克隆原表格的DOM副本，在副本上做拆分修改，完全不碰页面真实DOM。具体步骤如下：

• 深克隆原表格元素，得到独立的DOM节点
• 提取原表格的表头（<thead>），复用在每个分页表格里
• 按每13行拆分原表格的tbody行，为每组行创建新的表格
• 将所有拆分后的表格放入临时容器，传给jsPDF导出

完整代码示例：

makePdf() {
  this.loadingSubject.next(true);
  this.zone.run(() => {
    // 1. 深克隆原表格，不影响页面DOM
    const originalTable = this.el.nativeElement.cloneNode(true) as HTMLTableElement;
    const thead = originalTable.querySelector('thead')?.cloneNode(true) as HTMLElement;
    const tbodyRows = Array.from(originalTable.querySelectorAll('tbody tr'));
    const rowsPerPage = 13;
    const pageTables: HTMLElement[] = [];

    // 2. 拆分表格，每13行生成一个带thead的新表格
    for (let i = 0; i < tbodyRows.length; i += rowsPerPage) {
      const pageRows = tbodyRows.slice(i, i + rowsPerPage);
      // 创建新表格
      const newTable = document.createElement('table');
      // 复制原表格的样式，保持格式一致
      newTable.style.cssText = originalTable.style.cssText;
      // 添加表头
      newTable.appendChild(thead.cloneNode(true));
      // 添加当前页的行
      const tbody = document.createElement('tbody');
      pageRows.forEach(row => tbody.appendChild(row.cloneNode(true)));
      newTable.appendChild(tbody);
      pageTables.push(newTable);
    }

    // 3. 创建临时容器，存放所有分页表格
    const tempContainer = document.createElement('div');
    pageTables.forEach(table => {
      tempContainer.appendChild(table);
      // 可选：添加分页分隔符，确保jsPDF识别分页
      const pageBreak = document.createElement('div');
      pageBreak.style.pageBreakAfter = 'always';
      tempContainer.appendChild(pageBreak);
    });

    // 4. 用临时容器生成PDF
    const elWidth = originalTable.getBoundingClientRect().width;
    const elHeight = originalTable.getBoundingClientRect().height;
    const pdf = new jsPDF({
      orientation: 'l',
      unit: 'px',
      format: [elWidth, elHeight],
      compress: true
    });

    pdf.html(tempContainer, {
      callback: (pdf) => {
        pdf.save('sample.pdf');
        // 清理临时DOM节点
        tempContainer.remove();
        this.loadingSubject.next(false);
      }
    });
  });
}

关键细节：

• 使用cloneNode(true)深克隆，确保所有子元素和样式都被复制
• 复制原表格的style.cssText，保证导出的表格和页面格式一致
• 最后记得移除临时容器，避免内存泄漏
• 可选添加pageBreakAfter的div，确保每个表格单独占一页

内容的提问来源于stack exchange，提问作者Pramod Kumar