HTML转PDF时如何检测新页面并在每页开头添加图片？

要实现HTML转PDF时每页自动显示页眉图片，不需要手动检测分页时机，有两种主流方案，根据你的PDF生成工具选择：

方案1：使用CSS Paged Media（推荐，适合静态HTML转PDF） #

大多数专业PDF生成工具（如WeasyPrint、Prince、wkhtmltopdf）支持CSS Paged Media规范，通过@page规则可以直接定义每页的页眉模板，自动在分页时插入图片。

代码示例 #

/* 定义全局页面样式 */
@page {
  /* 为页眉预留足够空间，数值需匹配你的图片高度 */
  margin-top: 70px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;

  /* 设置页眉区域的内容 */
  @top-center {
    /* 替换为你的图片路径，支持本地路径或base64编码 */
    content: url('your-header-image.png');
    display: block;
    width: 120px; /* 自定义图片宽度 */
    height: auto;
    margin: 0 auto; /* 居中显示 */
  }
}

/* 可选：如果不需要第一页显示页眉，添加以下样式 */
/*
body > *:first-child {
  margin-top: 0;
}
*/

注意事项 #

• 不同工具对CSS属性的支持有差异，比如wkhtmltopdf对@top-*伪元素的支持有限，建议优先测试WeasyPrint或Prince；
• 图片路径要确保生成工具能访问到，本地文件需用绝对路径，或者直接嵌入base64编码的图片；
• 必须调整margin-top的值，避免页眉图片和正文内容重叠。

方案2：JavaScript动态跟踪分页（适合JS驱动的PDF生成，如jsPDF） #

如果用jsPDF这类JavaScript工具动态生成PDF，需要手动跟踪内容的高度，判断是否需要分页，然后在新页面插入图片。

代码示例 #

// 初始化jsPDF实例，A4纸纵向
const doc = new jsPDF('p', 'mm', 'a4');
const pageWidth = doc.internal.pageSize.width;
const pageHeight = doc.internal.pageSize.height;
let currentY = 30; // 初始Y坐标，预留页眉空间

// 假设你有多个内容区块需要添加
const contentBlocks = document.querySelectorAll('.content-block');

// 逐个处理内容区块
contentBlocks.forEach(async (block) => {
  // 将HTML区块转为canvas
  const canvas = await html2canvas(block);
  const imgData = canvas.toDataURL('image/png');
  
  // 计算图片在PDF中的高度（按A4宽度等比例缩放）
  const imgWidth = pageWidth - 20; // 左右各留10mm边距
  const imgHeight = (canvas.height * imgWidth) / canvas.width;

  // 检查当前内容是否超出页面剩余空间
  if (currentY + imgHeight > pageHeight) {
    // 添加新页面
    doc.addPage();
    // 在新页开头插入页眉图片
    doc.addImage('your-header-image.png', 'PNG', (pageWidth - 100)/2, 10, 100, 40);
    // 重置Y坐标到页眉下方
    currentY = 50;
  }

  // 添加内容图片到PDF
  doc.addImage(imgData, 'PNG', 10, currentY, imgWidth, imgHeight);
  // 更新Y坐标
  currentY += imgHeight + 15;
});

// 保存PDF
doc.save('multi-page-document.pdf');

关键逻辑 #

• 通过currentY变量跟踪当前内容的垂直位置；
• 每次添加内容前，判断剩余页面空间是否足够，不足则新建页面并插入页眉图片；
• 依赖html2canvas将HTML元素转为图片，再插入到PDF中。

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