如何实现固定HTML内容的A4混合横竖版打印（表格单独横版）

给定HTML代码 #

<html>
<style>
    div.container > table {
        border-collapse: collapse;
    }
    div.container > table > tbody > tr > td {
        border: 1pt solid;
    }
</style>

<body>
    <div class="container">
        <p>Hello</p>
        <table>
            <tbody>
                <tr>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                    <td>Lorem ipsum</td>
                </tr>
            </tbody>
        </table>
        <p>Hi</p>
    </div>
</body>
</html>

打印需求 #

• 第一页竖版（portrait）显示“Hi”
• 第二页横版（landscape）显示表格（旋转90度）
• 第三页竖版显示“Hello”

尝试方案及问题 #

第一次尝试的CSS #

@media print {
    @page {
        size: a4 portrait;
    }
    div.container > table {
        break-before: page;
        break-after: page;
        transform: rotate(-90deg);
    }
}

遇到的问题：

• 表格未对齐页面左上角
• 表格旋转前按竖版页面宽度计算，导致宽度受限，无法完整显示

第二次尝试的CSS（无效） #

@media print {
    @page general{
        size: a4 portrait;
    }

    @page rotated {
        size: a4 landscape;
    }

    div.container {
        page: general;
    }

    div.container > table {
        break-before: page;
        break-after: page;
        page: rotated;
    }
}

实现要求 #

• HTML代码必须保持原样，不能修改结构
• 优先使用CSS实现，无法实现则用纯JavaScript

解决方案（CSS实现） #

以下CSS可满足需求，兼容现代浏览器：

@media print {
    /* 通用竖版A4页面，消除默认边距 */
    @page {
        size: a4 portrait;
        margin: 0;
    }

    /* 表格专用横版A4页面 */
    @page table-page {
        size: a4 landscape;
        margin: 0;
    }

    /* 调整容器内元素的打印顺序，让Hi在前、Hello在后 */
    div.container {
        display: flex;
        flex-direction: column-reverse;
        margin: 0;
        padding: 0;
    }

    /* 让Hi单独占第一页 */
    div.container > p:last-child {
        break-after: page;
        padding: 20mm; /* 模拟页边距，提升可读性 */
    }

    /* 表格单独占第二页，应用横版页面规则 */
    div.container > table {
        break-before: page;
        break-after: page;
        page: table-page;
        /* 设置表格尺寸适配横版页面，旋转后占满可用空间 */
        width: 100vh;
        transform: rotate(-90deg);
        transform-origin: top left;
        /* 旋转后调整位置，对齐页面左上角 */
        position: absolute;
        top: 100%;
        left: 0;
        border-collapse: collapse;
    }

    /* 表格单元格样式保持 */
    div.container > table > tbody > tr > td {
        border: 1pt solid;
    }

    /* Hello所在的p元素单独占第三页，添加页边距 */
    div.container > p:first-child {
        padding: 20mm;
    }

    /* 消除body默认边距 */
    body {
        margin: 0;
        padding: 0;
    }
}

方案说明 #

1. 调整打印顺序：通过flex-direction: column-reverse反转容器内元素的显示顺序，让原HTML末尾的“Hi”出现在打印第一页，原开头的“Hello”出现在第三页。
2. 分页控制：用break-after: page和break-before: page确保每个内容块单独占一页。
3. 表格横版适配：
   • 定义table-page横版页面规则，给表格应用该页面。
   • 设置transform-origin: top left让表格从左上角旋转，避免偏移。
   • 通过绝对定位调整旋转后的表格位置，使其对齐页面左上角。
   • 用width: 100vh让表格宽度适配横版页面的高度（旋转后对应页面宽度），确保表格完整显示。
4. 页边距处理：给p元素添加padding模拟页边距，避免内容紧贴页面边缘。

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