Angular中jsPDF+htm2canvas导出PDF时内容跨页断裂问题

导出员工证书积分PDF时，底部内容出现跨页断裂，可通过以下步骤修复：

• 添加CSS防止表格行拆分：给表格行添加样式，避免单一行被拆分到两页

.certificate-table tr {
  page-break-inside: avoid;
  -webkit-page-break-inside: avoid;
}

• 优化jsPDF导出配置：调整边距、清晰度，同时处理按钮显示逻辑
  修改onExportPdf方法：

onExportPdf(EmpName) {
  this.loaderservice.display(true);
  // 隐藏导出按钮，避免被导出
  const buttons = document.querySelectorAll('.hide-export-btn, .hide-export-btn2, .hide-export-btn3');
  buttons.forEach(btn => (btn as HTMLElement).style.display = 'none');

  const doc = new jsPDF('p', 'pt', 'A4');
  const source = document.getElementById('content');
  // 适配A4纸张宽度（留边距后设为750pt）
  source.style.width = '750px';

  doc.setFontSize(8);
  doc.html(source, {
    callback: function (pdf) {
      pdf.save(`${EmpName} Points Details.pdf`);
      // 恢复按钮显示
      buttons.forEach(btn => (btn as HTMLElement).style.display = 'block');
      this.loaderservice.display(false);
    }.bind(this),
    margin: [40, 40, 40, 40], // 设置上下左右边距
    html2canvas: {
      scale: 1.2, // 提升导出清晰度
      logging: false
    }
  });
}

• 给表格添加防拆分容器：在表格外层包裹容器，避免整个表格被拆分

<div style="page-break-inside: avoid;">
  <table class="skill-view-table certificate-table">
    <!-- 原表格内容 -->
  </table>
</div>

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