如何在指定表格行插入分页符后自动添加重复自定义表头？

嘿，我之前也跟你一样，在html2pdf.js里折腾过动态表格跨页加自定义表头的问题，手动插分页符完全不现实，太懂这种抓瞎的感觉了！下面给你几个亲测有效的解决方案，你可以根据自己的需求选：

方案一：利用html2pdf的分页回调动态插入表头 #

html2pdf其实自带了分页相关的回调钩子，我们可以抓住“即将分页”的时机，自动把自定义表头插进去。具体步骤如下：

• 先准备好一个隐藏的自定义表头模板，比如<div class="custom-header" style="display:none;">你的自定义表头内容</div>
• 初始化html2pdf时，配置pagebreak选项里的before回调——这个回调会在每一页（除了第一页）生成前触发
• 在回调里判断当前要分页的元素是不是表格相关的，避免在非表格区域乱插表头，然后克隆表头模板插入到分页位置前

给你一段可参考的代码：

// 克隆隐藏的表头模板，提前准备好显示样式
const headerTemplate = document.querySelector('.custom-header').cloneNode(true);
headerTemplate.style.display = 'block';

// 配置html2pdf的生成选项
const pdfOptions = {
  margin: 15,
  filename: 'dynamic-table.pdf',
  html2canvas: { scale: 2 },
  jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
  pagebreak: {
    mode: ['css', 'legacy'],
    before: function(element) {
      // 只在表格相关元素分页时插入表头
      if (element.closest('table')) {
        const newHeader = headerTemplate.cloneNode(true);
        element.parentNode.insertBefore(newHeader, element);
      }
    }
  }
};

// 触发PDF生成
html2pdf().set(pdfOptions).from(document.body).save();

注意：要确保自定义表头的样式和表格完全对齐，避免出现错位的情况，最好给表头和表格设置相同的宽度规则。

方案二：用CSS原生属性尝试（适合标准表格表头） #

如果你的表头是标准<table>里的<thead>，可以先试试CSS的原生重复表头属性，这个方法最简单，不过html2pdf对它的支持偶尔会有小问题：

@media print {
  thead {
    display: table-header-group; /* 强制thead在每页顶部重复 */
  }
  table {
    page-break-inside: avoid; /* 避免表格行被分页截断 */
  }
}

但这个方法只适用于原生表格表头，如果你是完全自定义的非表格结构表头，还是得用方案一。

方案三：预计算行高手动插入分页符和表头 #

如果上面的回调方法不符合你的需求，还可以提前计算表格的高度，预判分页位置，手动插入分页符和表头：

• 先算出自定义表头的高度、表格每行的平均高度，再结合页面可用高度（A4纸高度减去边距、页眉页脚），算出一页能放多少行
• 遍历表格行，每到临界行数就插入分页符和克隆的表头
• 记得在PDF生成完成后，把这些动态插入的元素删掉，避免影响原页面

参考代码如下：

const targetTable = document.querySelector('.dynamic-table');
const tableRows = targetTable.querySelectorAll('tbody tr');
const headerHeight = document.querySelector('.custom-header').offsetHeight;
const pageAvailableHeight = 267; // A4纸高度297mm，减去上下边距各15mm后的可用高度
const singleRowHeight = tableRows[0].offsetHeight;
const rowsPerPage = Math.floor((pageAvailableHeight - headerHeight) / singleRowHeight);

let rowCounter = 0;
tableRows.forEach((row, index) => {
  rowCounter++;
  // 到达每页最大行数且不是最后一行时，插入分页符和表头
  if (rowCounter === rowsPerPage && index !== tableRows.length - 1) {
    // 创建分页符
    const pageBreak = document.createElement('div');
    pageBreak.style.pageBreakAfter = 'always';
    row.parentNode.insertBefore(pageBreak, row.nextSibling);
    // 插入自定义表头
    const newHeader = headerTemplate.cloneNode(true);
    newHeader.classList.add('inserted');
    row.parentNode.insertBefore(newHeader, pageBreak.nextSibling);
    // 重置计数器
    rowCounter = 0;
  }
});

// 生成PDF后清理动态元素
html2pdf().set(pdfOptions).from(document.body).save().then(() => {
  document.querySelectorAll('.page-break, .inserted').forEach(el => el.remove());
});

备注：内容来源于stack exchange，提问作者Dóra Botos