Html2pdf问题：在已生成PDF的新页面添加文本不显示

架构老林

2026-7-20

问题分析与解决

你的代码里文本看不见的核心原因是单位不匹配：

你在jsPDF配置里设置了unit: 'in'（英寸），但调用pdf.text()时传入的坐标10,10是按英寸计算的，而A4纸的尺寸仅约8.27×11.69英寸，10英寸的横坐标已经超出页面范围，文本被渲染到了页面外，自然看不见。

另外，你的代码逻辑是新增一页再写文本，这和你“给每页添加页脚”的需求不符，正确做法是遍历PDF的所有现有页面，逐个添加页脚。

修正后的代码

JavaScript代码

const content = document.querySelector(".pdf");
const config = {
   filename:  'document.pdf',
   image: {type: 'jpeg',quality: 1.0},
   html2canvas: {dpi: 300, letterRendering: true},
   jsPDF: {orientation: 'portrait', unit: 'in', format: 'a4'},
}

$("button").on('click', function() {
  html2pdf().from(content).set(config).toPdf().get('pdf').then((pdf) => {
      const totalPages = pdf.internal.getNumberOfPages();
      
      // 遍历所有页面添加页脚
      for (let i = 1; i <= totalPages; i++) {
          pdf.setPage(i); // 切换到目标页面
          pdf.setFontSize(12);
          pdf.setTextColor(100); // 设置灰色文本，避免过于突兀
          // 页脚内容：页码，坐标设置在页面底部（距离底部0.5英寸）
          pdf.text(`第 ${i} 页 / 共 ${totalPages} 页`, pdf.internal.pageSize.getWidth() / 2, pdf.internal.pageSize.getHeight() - 0.5, {align: 'center'});
      }

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

关键修正点

单位统一：因为配置了unit: 'in'，所有坐标按英寸计算，比如pdf.internal.pageSize.getHeight() - 0.5表示距离页面底部0.5英寸的位置。
遍历所有页面：通过setPage(i)切换到每一页，再添加页脚内容。
居中对齐：使用{align: 'center'}让页码居中，符合页脚的常规样式。