如何使用HTML2pdf回调函数为导出的PDF添加页眉和页脚？

核心问题原因 #

• html2pdf 不存在 pdfCallback 配置项，你自定义的回调函数根本不会被触发，自然无法获取到jsPDF实例
• 现有代码存在多处语法错误、变量未定义问题

具体修复步骤 #

1. 改用html2pdf链式调用的then方法，在内容渲染完成后获取内置的jsPDF实例
2. 修复所有语法错误，补充缺失的变量定义
3. 调整页眉页脚坐标，和你配置的英寸单位匹配
4. 正确获取PDF总页数，不需要额外定义pdfPageCount变量

修复后完整代码 #

HTML代码 #

<div class="modal-body" id="printItems">
  <div class="container" id="selectedItems"></div>  
</div>

<button style="border:none">
  <span id="downloadActivity" class="glyphicon glyphicon-download-alt" title="download report to PDF" onclick="downloadPDF()"></span>
</button>

<script type="text/javascript" src="/library/html2pdf.bundle.js"></script>

JavaScript代码 #

// 提前定义业务变量，可根据实际需求修改
const webPage = "业务报告";
const dateStamp = new Date().toLocaleDateString();

function downloadPDF() {
  // 指定要导出的DOM节点
  const element = document.getElementById('printItems');
  
  var opt = {
    margin: [0.8, 1, 0.8, 1], // 上、右、下、左四边距，预留页眉页脚空间
    filename: webPage + dateStamp + '.pdf',
    quality: 0.95,
    image: {type: 'jpeg', quality:1},
    html2canvas: {
      dpi:72,
      useCORS: true,
      letterRendering: true,
      width: 205,
      scale: 0.26,
      getContext: '2d'
    },
    jsPDF: {unit: 'in', format: 'a4', orientation: 'portrait'}
  };

  // 链式调用获取pdf实例添加页眉页脚后保存
  html2pdf().set(opt).from(element)
  .toPdf()
  .get('pdf')
  .then(function(pdfObject) {
    // 获取pdf总页数
    const totalPages = pdfObject.getNumberOfPages();
    // 单位为英寸，A4尺寸为宽8.27英寸、高11.69英寸
    for(let i = 1; i <= totalPages; i++) {
      pdfObject.setPage(i);
      // 页眉：距离左上角水平1英寸、垂直0.5英寸位置
      pdfObject.text('自定义页眉文本', 1, 0.5);
      // 页脚：距离左下角水平1英寸、垂直11英寸位置
      pdfObject.text(`自定义页脚文本 第${i}页/共${totalPages}页`, 1, 11);
    }
  })
  .save();
}

补充说明 #

页眉页脚的坐标数值可以根据实际排版需求调整，只要和你配置的jsPDF.unit单位匹配即可。

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