为div添加page类打印多页问题排查求助

针对你遇到的给div添加page类时打印3页的问题，核心原因是旋转后的.page元素实际占用空间超出了62mm×52mm的打印页面范围，加上浏览器打印引擎对绝对定位元素的分页判断逻辑导致多页输出。以下是具体的修复方案：

调整打印CSS规则 #

修改你的@media print区块样式，重点限制旋转后元素的尺寸，并强制避免分页：

@page {
    size: 62mm 52mm;
    margin: 0;
}

@media print {    
    .no-print, .no-print * {
        display: none !important;
    }
    
    /* 清除body默认边距，避免额外空间 */
    body {
        margin: 0;
        padding: 0;
        visibility: hidden;
    }
    
    .page, .page * {
        visibility: visible;
    }
    
    .page {
        position: absolute;
        left: 0;
        top: 0;
        /* 旋转后宽高互换，设置为打印页的反向尺寸 */
        width: 52mm;
        height: 62mm;
        /* 用flex精准居中内容 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        transform: rotate(270deg);
        /* 强制元素在一页内，禁止分页 */
        page-break-inside: avoid;
        page-break-after: avoid;
    }
    
    /* 移除br标签的不确定高度，改用p标签margin控制间距 */
    .page br {
        display: none;
    }
    
    /* 统一p标签间距，避免过高触发分页 */
    .page p {
        margin: 4mm 0;
        padding: 0;
        line-height: 1.2;
    }
}

优化HTML结构 #

把原有的<br>替换为CSS控制的p标签间距，避免隐性高度问题：

<div class="page" data-role="content">
    <p align="center"><?php echo $_SESSION['prod_name'];?></p>
    <p align="center">#<?php echo $_SESSION['prod_no'];?></p>
    <p align="center"><?php echo date("d / m / y",strtotime($_SESSION['date']));?></p>
    <p align="center"><?php echo $_SESSION['result1'];?></p>
    <p align="center"><?php echo $_SESSION['result2'];?></p>
</div>

关键修复点说明 #

• 旋转尺寸适配：旋转270度后元素宽高会互换，所以将.page的宽设为打印页高度（52mm）、高设为打印页宽度（62mm），确保旋转后刚好填满打印区域。
• Flex居中控制：替代原有的margin auto，精准控制内容在旋转后的页面内居中，避免内容偏移超出页面范围。
• 强制禁止分页：通过page-break-inside: avoid和page-break-after: avoid明确告知浏览器该元素不能被拆分分页。
• 清除默认样式：移除body、p标签的默认边距和br标签的高度，避免隐性样式增加元素总高度触发分页。

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