Puppeteer生成PDF：如何让页脚固定在最后一页底部

针对你遇到的带复杂表格（含thead、tfoot及分页设置）的PDF页脚定位问题，以下是几个可行的方案：

方案1：利用CSS打印媒体查询与@page规则（推荐） #

Chromium的PDF生成引擎支持CSS打印规范，通过@page规则定义页面边距，将页脚放在底部边距区域，同时处理表格的重复表头/表尾和分页：

@media print {
  /* 定义页面边距，预留页脚空间 */
  @page {
    size: A4;
    margin: 2cm 1cm 3cm 1cm; /* 底部边距预留3cm放页脚 */
  }

  /* 固定页脚到页面底部边距 */
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5cm; /* 高度小于等于@page的底部边距 */
    padding: 0.5cm 1cm;
    background: #fff;
    border-top: 1px solid #ccc;
  }

  /* 让表格表头/表尾在每页重复显示 */
  table thead {
    display: table-header-group;
  }
  table tfoot {
    display: table-footer-group;
  }

  /* 避免表格行被分页截断（可选，根据需求调整） */
  tr, td, th {
    page-break-inside: avoid;
  }

  /* 确保内容不会和页脚重叠 */
  .content {
    margin-bottom: 3cm; /* 和@page的底部边距一致 */
  }
}

在Puppeteer中，确保启用printBackground: true，否则背景样式可能不生效：

await page.pdf({
  path: 'output.pdf',
  format: 'A4',
  printBackground: true,
  margin: { top: '2cm', right: '1cm', bottom: '3cm', left: '1cm' } // 和CSS的@page边距对应
});

方案2：动态计算内容高度调整页脚（针对特殊动态场景） #

如果CSS方案仍有偏差，可结合Puppeteer的evaluate方法，在页面渲染完成后动态计算每页高度，调整页脚位置：

await page.evaluate(() => {
  const content = document.querySelector('.content');
  const footer = document.querySelector('.footer');
  const pageHeight = window.innerHeight;
  let currentOffset = 0;

  // 克隆页脚，为每页生成独立的页脚
  while (currentOffset < content.scrollHeight) {
    const footerClone = footer.cloneNode(true);
    footerClone.style.position = 'absolute';
    footerClone.style.top = `${currentOffset + pageHeight - footer.offsetHeight}px`;
    document.body.appendChild(footerClone);
    currentOffset += pageHeight;
  }

  // 隐藏原始页脚
  footer.style.display = 'none';
});

// 生成PDF时关闭默认边距，用JS计算的位置
await page.pdf({
  path: 'output.pdf',
  format: 'A4',
  printBackground: true,
  margin: { top: 0, right: 0, bottom: 0, left: 0 }
});

注意：这种方法需要确保内容的分页逻辑和Chromium的打印分页一致，可能需要调整pageHeight的计算（考虑实际纸张尺寸的像素转换）。

关键注意事项 #

• 避免在表格上滥用page-break-inside: avoid，如果表格本身超过一页，会导致分页失效，可改为在表格行或行组上设置。
• 确保页脚的高度不超过@page定义的底部边距，否则会被截断。
• 测试时可以先在Chrome的打印预览中调试CSS，确认效果后再用Puppeteer生成，减少调试成本。

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