如何避免html2pdf导出PDF时表格行（tr）被中途拆分

我正尝试使用html2pdf将HTML页面导出为PDF，但当表格内容过长时，表格行（tr）往往会被中途拆分。

已尝试的无效解决方案 #

方案1：配置pagebreak: { avoid: ['tr', 'td'] } #

var opt = {
        margin: 0.5,
        filename: dashboard_name + '_' + client_name + '.pdf',
        pagebreak: { avoid: ['tr', 'td'] },
        image:        { type: 'jpeg', quality: 1 },
        html2canvas: { dpi: 192, width: $(window).width()},
        jsPDF: {
            orientation: pageOrient,
            unit: 'cm',
            format: 'a2',
            compress: true
        }
    };

方案2：添加分页CSS #

@media print {
            table, div   {
                break-inside: avoid;
            }
        }
    
        thead { display: table-header-group; }
        tfoot { display: table-row-group;}
        tr {
        page-break-after: always!important;
        page-break-before: always!important;
        page-break-inside: auto!important;

    }

方案3：配置pagebreak: { mode: ['avoid-all', 'css', 'legacy'] } #

pagebreak: {
    mode: ['avoid-all', 'css', 'legacy']
},

但表格行仍会跨两页拆分，如下方图片所示：

可行解决方案 #

方案1：优化CSS分页规则 #

调整CSS，给表格和行设置更精准的分页控制，同时确保表格边框合并避免渲染冲突：

@media print {
  table {
    border-collapse: collapse;
    page-break-inside: avoid;
  }
  tr {
    page-break-inside: avoid!important;
    page-break-after: auto!important;
  }
  td, th {
    page-break-inside: avoid!important;
  }
  thead {
    display: table-header-group;
  }
}

同时在html2pdf配置中仅启用CSS分页模式，避免多模式冲突：

var opt = {
  // 保留你的其他配置
  pagebreak: { mode: ['css'] }
};

方案2：用div包裹表格单元格内容 #

如果表格结构允许，把每个单元格的内容放在div里，给div设置禁止分页：

<tr>
  <td>
    <div class="no-break">单元格内容</div>
  </td>
  <td>
    <div class="no-break">单元格内容</div>
  </td>
</tr>

对应的CSS：

@media print {
  .no-break {
    page-break-inside: avoid!important;
  }
}

方案3：调整html2canvas渲染参数 #

html2canvas的缩放或宽度设置可能导致分页异常，尝试简化其配置：

var opt = {
  // 保留你的其他配置
  html2canvas: {
    dpi: 192,
    scale: 1,
    useCORS: true
  }
};

方案4：手动拆分表格（终极方案） #

如果前面的方法都不管用，可以用JS手动计算行高，把长表格拆成多个带表头的小表格，刚好适配每页：

function splitLongTable(tableId) {
  const table = document.getElementById(tableId);
  const rows = Array.from(table.querySelectorAll('tr'));
  if (rows.length <= 1) return;
  
  const headerRow = rows.shift();
  const pageMaxHeight = 297 * 37.795; // A2高度转像素，可根据你的纸张格式调整
  let currentTable = document.createElement('table');
  currentTable.className = table.className;
  currentTable.appendChild(headerRow.cloneNode(true));
  let currentTotalHeight = headerRow.offsetHeight;

  rows.forEach(row => {
    const rowHeight = row.offsetHeight;
    if (currentTotalHeight + rowHeight > pageMaxHeight) {
      // 插入当前表格，新建表格
      table.parentNode.insertBefore(currentTable, table);
      currentTable = document.createElement('table');
      currentTable.className = table.className;
      currentTable.appendChild(headerRow.cloneNode(true));
      currentTotalHeight = headerRow.offsetHeight;
    }
    currentTable.appendChild(row);
    currentTotalHeight += rowHeight;
  });
  // 替换原表格
  table.parentNode.replaceChild(currentTable, table);
}

// 导出PDF前调用，传入你的表格ID
splitLongTable('your-target-table');

内容的提问来源于stack exchange，提问作者Yeo Bryan