jsPDF转换HTML为PDF时页眉页脚无法正常显示问题求助

问题背景 #

需要纯前端通过script标签将HTML转为PDF，无需服务器依赖。使用jsPDF时，因fromHtml改为html的破坏性更新，导致页眉页脚无法正确显示在每页；现有代码中设置页眉页脚的循环因Promise异步特性提前结束，无法完成所有页面的页眉页脚添加。

方案一：修复jsPDF代码（使用async/await处理异步） #

原代码的问题在于嵌套的then导致异步流程难以控制，改用async/await可以确保每页的页眉页脚渲染完成后再处理下一页，避免循环提前终止。

修改后的代码：

<meta charset="utf-8" />
<title>jsPDF - HTML转PDF</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script>
async function convertHTMLtoPDF() {
  const { jsPDF } = window.jspdf;
  let doc = new jsPDF("p", "pt", "a4");
  let pdfContent = document.querySelector("#divID");
  let header = document.querySelector("#header");
  let footer = document.querySelector("#footer");

  // 先渲染主内容到PDF
  await doc.html(pdfContent, {
    x: 12,
    y: 12,
    margin: [60, 10, 40, 10] // 预留页眉页脚空间
  });

  const totalPages = doc.internal.getNumberOfPages();
  
  // 遍历每页添加页眉页脚
  for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
    doc.setPage(pageNum);
    doc.setFontSize(12);
    
    // 等待页眉渲染完成
    await doc.html(header, { x: 10, y: 10 });
    // 等待页脚渲染完成
    await doc.html(footer, { x: 10, y: doc.internal.pageSize.height - 50 });
  }

  doc.save("final.pdf");
}
</script>

关键改进点 #

• 使用async/await替代嵌套then，确保异步操作顺序执行，避免循环提前结束
• 提前为页眉页脚预留margin空间，防止内容与页眉页脚重叠
• 用for循环替代递归，逻辑更直观易维护

方案二：使用html2pdf.js（更简洁的封装库） #

html2pdf.js封装了html2canvas和jsPDF，提供了更易用的页眉页脚配置，无需手动处理分页和异步流程。

示例代码：

<meta charset="utf-8" />
<title>html2pdf - HTML转PDF</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

<script>
function convertHTMLtoPDF() {
  const element = document.querySelector("#divID");
  const header = document.querySelector("#header").innerHTML;
  const footer = document.querySelector("#footer").innerHTML;

  const opt = {
    margin: [60, 10, 40, 10],
    filename: 'final.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: 'pt', format: 'a4', orientation: 'portrait' },
    // 配置页眉页脚
    pagebreak: { mode: ['css', 'legacy'] },
    footer: {
      content: footer,
      margin: [0, 0, 0, 20],
      fontSize: 12
    },
    header: {
      content: header,
      margin: [0, 20, 0, 0],
      fontSize: 12
    }
  };

  html2pdf().set(opt).from(element).save();
}
</script>

优势 #

• 无需手动处理分页和异步渲染逻辑
• 内置页眉页脚配置项，直接传入HTML内容即可
• 封装完善，减少自定义代码量

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