如何实现打印时tfoot标签内的提示仅在非最后一页显示

你之前用jQuery给重复页脚加标记不生效的核心原因是：浏览器打印时自动重复的thead、tfoot是原生渲染的虚拟节点，JS无法直接捕获和修改这些节点，所以需要用CSS+JS结合的方案实现需求，具体步骤如下：

步骤1：调整HTML结构 #

把原tfoot里的固定页脚内容（不含continue提示）移到表格外部，作为最后一页专属的页脚：

<table>
    <thead>
        <tr>
            <th>
                <h1>Head</h1>
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- 原有的大量表格行结构保持不变 -->
    </tbody>
    <tfoot>
        <!-- 仅保留continue提示，所有非最后一页会自动重复显示这个tfoot -->
        <tr class="continue-row">
            <td>
                <span class='footer_continue'>continue --></span>
            </td>
        </tr>
    </tfoot>
</table>
<!-- 最后一页专属的固定页脚，仅在内容末尾显示 -->
<div class="final-footer">
    <table style="width: 100%;">
        <tr>
            <th scope="row">
                <h1>Footer</h1>
            </th>
        </tr>
    </table>
</div>

步骤2：添加打印专用CSS样式 #

/* 屏幕端样式 */
@media screen {
    .continue-row, .final-footer {
        display: none;
    }
}

/* 打印端样式 */
@media print {
    /* 基础配置：保证thead、tfoot每页重复，行内不分页 */
    table {
        width: 100%;
        page-break-inside: auto;
    }
    thead {
        display: table-header-group;
    }
    tfoot {
        display: table-footer-group;
    }
    tr {
        page-break-inside: avoid;
    }
    /* 可根据需求调整打印边距 */
    @page {
        margin: 2cm;
    }

    /* 显示非最后一页的continue提示 */
    .continue-row {
        display: table-row;
    }
    /* 显示最后一页的固定页脚 */
    .final-footer {
        display: block;
        margin-top: 20px;
    }
}

步骤3：添加JS逻辑处理单页场景 #

// 监听打印前事件，判断页数控制提示显隐
window.addEventListener('beforeprint', () => {
    // A4纵向打印，上下边距2cm时的可打印高度（96dpi下约等于972px，可根据实际边距调整数值）
    const perPagePrintHeight = 972;
    // 计算全部内容总高度
    const totalContentHeight = document.querySelector('table').offsetHeight + document.querySelector('.final-footer').offsetHeight;
    // 计算总页数
    const totalPages = Math.ceil(totalContentHeight / perPagePrintHeight);

    const continueRow = document.querySelector('.continue-row');
    if (totalPages <= 1) {
        // 单页场景隐藏continue提示
        continueRow.style.display = 'none';
    } else {
        // 多页场景显示非最后一页的continue提示
        continueRow.style.display = 'table-row';
    }
});

效果验证 #

• 单页打印：仅显示表格内容+底部固定页脚，无continue提示
• 2页打印：第一页底部显示continue提示，第二页底部仅显示固定页脚
• 多页打印：除最后一页外，所有页底部均显示continue提示，最后一页仅显示固定页脚

注意：如果你的打印纸张尺寸、边距有自定义调整，只需要修改perPagePrintHeight的数值适配即可，数值为每页可打印区域的高度（单位px）。

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