如何用jsPDF的addHTML方法为所有PDF页面添加页眉页脚或预留空白

我之前也遇到过这个问题，jsPDF的addHTML方法自带的margin配置确实只对第一页生效——因为它的分页逻辑是把渲染后的canvas切割成多个页面，后续分页不会自动继承全局margin。这里有两个可行的解决方案，你可以根据需求选择：

方案一：利用pageAdded事件补画页眉页脚（基于原addHTML逻辑） #

这个方案不需要改变太多原有代码，通过监听jsPDF的页面添加事件，给每个新创建的页面自动绘制页眉页脚，同时手动调整内容的起始位置来避开页眉页脚区域。

// 定义页眉页脚高度和页边距
const headerHeight = 30;
const footerHeight = 30;
const pageMargin = 10;

var htmlSource = $('#body')[0]; 

function create (){ 
  var pdf = new jsPDF('p','px'); 

  // 监听新页面添加事件，自动绘制页眉页脚
  pdf.events.on('pageAdded', function() {
    const pageWidth = pdf.internal.pageSize.width;
    const pageHeight = pdf.internal.pageSize.height;

    // 绘制页眉（文本+分隔线）
    pdf.setFontSize(12);
    pdf.text('你的页眉内容', pageMargin, headerHeight/2);
    pdf.line(pageMargin, headerHeight + 5, pageWidth - pageMargin, headerHeight + 5);

    // 绘制页脚（页码+分隔线）
    pdf.setFontSize(10);
    const currentPage = pdf.internal.getNumberOfPages();
    pdf.text(`第 ${currentPage} 页`, pageWidth/2, pageHeight - footerHeight/2);
    pdf.line(pageMargin, pageHeight - footerHeight -5, pageWidth - pageMargin, pageHeight - footerHeight -5);
  });

  // 调用addHTML时，调整内容起始位置，避开页眉区域
  pdf.addHTML(
    htmlSource,
    pageMargin, // 内容左偏移
    headerHeight + pageMargin, // 内容上偏移（页眉高度+边距）
    {
      pagesplit: true,
      // 设置底部边距，避免内容被页脚覆盖
      margin: { top: 0, right: pageMargin, bottom: footerHeight + pageMargin, left: 0 }
    }, 
    function(dispose){ 
      // 注意：第一页不会触发pageAdded事件，手动补画第一页的页眉页脚
      pdf.setPage(1);
      const pageWidth = pdf.internal.pageSize.width;
      const pageHeight = pdf.internal.pageSize.height;

      pdf.setFontSize(12);
      pdf.text('你的页眉内容', pageMargin, headerHeight/2);
      pdf.line(pageMargin, headerHeight + 5, pageWidth - pageMargin, headerHeight + 5);

      pdf.setFontSize(10);
      pdf.text(`第 1 页`, pageWidth/2, pageHeight - footerHeight/2);
      pdf.line(pageMargin, pageHeight - footerHeight -5, pageWidth - pageMargin, pageHeight - footerHeight -5);

      pdf.save('datapdf.pdf'); 
    } 
  ); 
}

关键点说明： #

• pageAdded事件会在除第一页外的新页面创建时触发，所以需要在addHTML的回调里手动处理第一页的页眉页脚
• 通过调整addHTML的y坐标，让内容从页眉下方开始，同时设置bottom margin为页脚高度+边距，确保内容不会被页脚覆盖
• 如果只需要预留空白不需要绘制内容，删除绘制页眉页脚文本和线条的代码即可

方案二：用html2canvas预渲染后手动分页（可控性更高） #

这个方案直接使用html2canvas把HTML转成canvas，然后根据PDF页面高度计算分页，逐个添加页面并绘制页眉页脚，适合需要复杂页眉页脚样式的场景（比如图片页眉、自定义页脚布局）。

function create() {
  const headerHeight = 30;
  const footerHeight = 30;
  const pageMargin = 10;
  const pdf = new jsPDF('p', 'px');
  const pageWidth = pdf.internal.pageSize.width;
  const pageHeight = pdf.internal.pageSize.height;
  // 计算每页可容纳的内容高度（减去页眉、页脚和边距）
  const contentHeightPerPage = pageHeight - headerHeight - footerHeight - pageMargin * 2;

  // 用html2canvas渲染HTML
  html2canvas($('#body')[0], { scale: 2 }).then(canvas => {
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    // 计算canvas到PDF页面的缩放比例
    const scale = pageWidth / canvasWidth;
    const scaledCanvasHeight = canvasHeight * scale;
    // 计算总页数
    const totalPages = Math.ceil(scaledCanvasHeight / contentHeightPerPage);

    for (let i = 0; i < totalPages; i++) {
      // 除第一页外，添加新页面
      if (i > 0) pdf.addPage();

      // 1. 绘制当前页的页眉
      pdf.setFontSize(12);
      pdf.text('你的页眉内容', pageMargin, headerHeight/2);
      pdf.line(pageMargin, headerHeight + 5, pageWidth - pageMargin, headerHeight + 5);

      // 2. 绘制当前页的内容（从canvas截取对应区域）
      const yOffsetOnCanvas = -i * contentHeightPerPage / scale; // canvas上的垂直偏移量
      pdf.addImage(
        canvas,
        'PNG',
        pageMargin, // 内容左偏移
        headerHeight + pageMargin, // 内容上偏移
        pageWidth - pageMargin * 2, // 内容宽度
        scaledCanvasHeight, // 内容总高度
        undefined,
        'FAST',
        yOffsetOnCanvas // 垂直偏移，实现分页截取
      );

      // 3. 绘制当前页的页脚
      pdf.setFontSize(10);
      pdf.text(`第 ${i + 1} 页 / 共 ${totalPages} 页`, pageWidth/2, pageHeight - footerHeight/2);
      pdf.line(pageMargin, pageHeight - footerHeight -5, pageWidth - pageMargin, pageHeight - footerHeight -5);
    }

    pdf.save('datapdf.pdf');
  });
}

关键点说明： #

• 通过scale:2提高canvas的分辨率，避免PDF内容模糊
• 手动计算每个页面需要截取的canvas区域，确保分页准确
• 每个页面都能独立绘制页眉页脚，完全可控，适合复杂需求

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