html2pdf配置jsPDF参数后Footer不显示，移除后分页异常求助

DevOps 小满

2026-8-24

问题分析与解决方案

核心问题是单位不匹配：你在jsPDF配置里指定了单位为英寸（in），但添加页脚时使用的是像素级别的坐标值，导致文字被绘制到了页面可视区域之外——所以能通过搜索找到文字，但肉眼看不到。

修复步骤：

统一坐标单位：所有位置计算都使用英寸（与jsPDF配置一致）
同步边距配置：确保html2pdf的margin与jsPDF单位匹配，避免分页异常

修改后的代码：

document.getElementById('generate').onclick = function () {
    var element = document.getElementById('element-to-print');

    var opt = {
        margin:       0.5, // 单位：英寸，与jsPDF配置一致
        filename:     '@pdf_filename',
        pagebreak:    { mode: 'avoid-all' },
        image:        { type: 'jpeg', quality: 0.98 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

    html2pdf().from(element).set(opt).toPdf().get('pdf').then((pdf) => {
        var totalPages = pdf.internal.getNumberOfPages();
        // Letter纸尺寸：宽8.5in，高11in
        const pageWidth = pdf.internal.pageSize.getWidth();
        const pageHeight = pdf.internal.pageSize.getHeight();

        for (let i = 1; i <= totalPages; i++) {
            pdf.setPage(i);
            pdf.setFontSize(10);
            pdf.setTextColor(150);
            // 用英寸设置坐标：右边距1in，底边距0.5in
            pdf.text(`PageNum ${i} of ${totalPages}`, pageWidth - 1, pageHeight - 0.5);
        }                 
    }).save();
};