如何使用html2pdf-jspdf JavaScript插件将HTML代码设为页眉页脚？

html2pdf 0.9.0 底层依赖 jsPDF 和 html2canvas，早期版本的 jsPDF 不支持直接绘制 HTML 内容，因此要实现每页添加 HTML 页眉，需要先将页眉的 HTML 转为 Canvas 图片，再插入到 PDF 的每一页中。

步骤1：准备页眉模板 #

先在页面中定义要作为页眉的 HTML 元素，设置display:none避免在原页面显示：

<div id="table-header" style="display:none; padding: 5px;">
  <!-- 这里放入你的表格页眉代码 -->
  <table style="width: 100%; border-collapse: collapse;">
    <thead>
      <tr>
        <th style="border: 1px solid #000; padding: 8px;">序号</th>
        <th style="border: 1px solid #000; padding: 8px;">名称</th>
        <th style="border: 1px solid #000; padding: 8px;">金额</th>
      </tr>
    </thead>
  </table>
</div>

步骤2：修改PDF生成代码 #

通过 html2canvas 将页眉转为 Canvas，再插入到 PDF 每页的指定位置：

// 获取页眉元素
const headerEl = document.getElementById('table-header');

// 先渲染页眉为Canvas
html2canvas(headerEl).then(canvas => {
  // 生成PDF主内容
  html2pdf()
    .from(element) // element是你要转PDF的目标元素
    .set({
      // 这里可以保留你的原有配置，比如页面尺寸、边距等
      margin: [50, 20, 20, 20], // 顶部留足空间放页眉
      filename: '带页眉的表格.pdf'
    })
    .toPdf()
    .get('pdf')
    .then(pdf => {
      const totalPages = pdf.internal.getNumberOfPages();
      const pageWidth = pdf.internal.pageSize.getWidth();
      // 将Canvas转为图片数据
      const headerImg = canvas.toDataURL('image/png');
      // 计算页眉在PDF中的尺寸（按页面宽度等比例缩放）
      const headerWidth = pageWidth - 40; // 左右各留20px边距
      const headerHeight = (canvas.height * headerWidth) / canvas.width;

      // 遍历每一页插入页眉
      for (let i = 1; i <= totalPages; i++) {
        pdf.setPage(i);
        // 在页面顶部绘制页眉图片
        pdf.addImage(headerImg, 'PNG', 20, 10, headerWidth, headerHeight);
        
        // 如果需要保留页码，可继续添加
        pdf.setFontSize(10);
        pdf.setTextColor(150);
        pdf.text(`Page ${i} of ${totalPages}`, pageWidth / 2, pdf.internal.pageSize.getHeight() - 10, { align: 'center' });
      }
    })
    .save();
});

关键说明 #

1. 边距调整：在set配置中设置足够的顶部边距，避免页眉和正文内容重叠。
2. 样式兼容性：html2canvas 对复杂 CSS 支持有限，尽量使用基础的边框、内边距等样式，确保页眉渲染正常。
3. 尺寸适配：通过等比例缩放计算页眉在 PDF 中的尺寸，保证页眉不会超出页面范围。

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