如何在浏览器打印多章节患者报告时实现重复页眉页脚与合规分页

阿华AIGC实验室

2026-3-30

我完全懂你现在的困扰——手动给每个章节套page容器的方式，没法处理单个章节内容超长的情况，导致跨页后页眉页脚直接消失，内容还容易和页脚重叠。其实浏览器原生的打印CSS就支持自动重复页眉页脚，只要调整一下布局逻辑就行，下面给你一套落地的解决方案：

核心思路

抛弃手动拆分page容器的思路，改用@page定义页面边距，专门给页眉页脚预留空间
用固定定位放置页眉页脚，浏览器打印时会自动在每一页重复渲染它们
给每个章节设置强制分页规则，确保章节从新页开始
调整内容区域的边距，避免内容和页眉页脚重叠

修改后的完整代码

下面是调整后的打印窗口部分代码（你原有的formatLabResult等工具函数可以完全保留）：

const printWindow = window.open("", "_blank");

printWindow.document.write(`
    <html>
    <head>
        <title>Patient Report</title>
       <style>
/* 通用基础样式 */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.section-title {
    border-bottom: 2px solid #333;
    margin-top: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
}

.signature-section {
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
}

/* 打印专属样式 */
@media print {
    @page {
        /* 上下边距预留页眉(40mm)和页脚(30mm)的位置，左右边距20mm */
        margin: 40mm 20mm 30mm 20mm;
        size: A4;
    }

    /* 全局页眉：每一页都会重复显示 */
    .print-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 40mm;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .print-header img {
        width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* 全局页脚：每一页都会重复显示 */
    .print-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 30mm;
        text-align: center;
    }

    .print-footer img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* 章节规则：除第一个章节外，其他章节强制新页开始 */
    .report-section:not(:first-child) {
        page-break-before: always;
    }

    /* 优化表格分页：尽量避免表格被截断在页中间 */
    table {
        page-break-inside: avoid;
    }

    /* 图片自适应打印页面宽度 */
    img {
        max-width: 100%;
        height: auto;
    }
}
</style>
    </head>
    <body>
        <!-- 全局页眉：所有页面都会重复渲染 -->
        <div class="print-header">
            <img src="${headerImg}" />
        </div>

        <!-- 全局页脚：所有页面都会重复渲染 -->
        <div class="print-footer">
            <img src="${footerImg}" />
        </div>

        <!-- 内容容器 -->
        <div class="print-content">
            <!-- 患者基础信息：作为第一个内容块，不需要新页开始 -->
            <div class="patient-info">
                <strong>Patient Name:</strong> ${patient.fullname}<br/>
                <strong>Age:</strong> ${patient.age} | <strong>Gender:</strong> ${patient.sex} | <strong>Phone:</strong> ${patient.phone}<br/>
                <strong>Report Date:</strong> ${reportDate}
            </div>

            <!-- 实验室结果章节 -->
            ${selectedSections.lab && labResults.length > 0 ? `
            <div class="report-section">
                <h2 class="section-title">Laboratory Results</h2>
                ${labResults.map(lab => `
                    <table>
                        <thead><tr><th>Test Name</th><th>Result</th></tr></thead>
                        <tbody>
                            <tr>
                                <td>${lab.name || "N/A"}</td>
                                <td>
                                    <table style="width:100%; border:none; border-collapse:collapse;">
                                        ${formatLabResult(lab)}
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                `).join("")}
            </div>
            ` : ""}

            <!-- 放射科报告章节 -->
            ${selectedSections.radiology && radiologyResults.length > 0 ? `
            <div class="report-section">
                <h2 class="section-title">Radiology Reports</h2>
                ${radiologyResults.map(r => `
                    <div class="radiology-box">
                        <strong>Report ID:</strong> ${r.request_id || "-"}<br/>
                        ${r.result}
                    </div>
                `).join("")}
            </div>
            ` : ""}

            <!-- 临床笔记章节 -->
            ${selectedSections.clinical && clinicalNotes.length > 0 ? `
            <div class="report-section">
                <h2 class="section-title">Doctor Clinical Notes</h2>
                ${clinicalNotes.map(note => `
                    <table>
                        <tbody>
                            <tr><td>Chief Complaint</td><td>${note.chief_complaints || "-"}</td></tr>
                            <tr><td>Major Symptoms</td><td>${note.major_symptoms || "-"}</td></tr>
                            <tr><td>Physical Exam</td><td>${note.physical_examination || "-"}</td></tr>
                            <tr><td>Diagnosis</td><td>${note.possible_dx || "-"}</td></tr>
                            <tr><td>Plan</td><td>${note.plan || "-"}</td></tr>
                        </tbody>
                    </table>
                `).join("")}
                ${signatureSection}
            </div>
            ` : ""}
        </div>
    </body>
    </html>
`);

printWindow.document.close();
printWindow.focus();
printWindow.print();

关键修改点说明

@page边距预留：
把页面上下边距设为40mm和30mm，刚好匹配页眉页脚的高度，内容会自动填充中间的安全区域，彻底避免内容和页眉页脚重叠。
固定定位实现重复页眉页脚：
用position: fixed将页眉页脚固定在页面的顶部和底部，浏览器打印时会自动在每一页渲染这些固定元素，完美解决重复显示的问题。
章节自动分页：
给章节容器.report-section添加page-break-before: always（排除第一个章节），确保每个章节都从新的一页开始，完全符合你的需求。
表格分页优化：
给表格添加page-break-inside: avoid，浏览器会尽量避免把表格截断在两页之间；如果表格实在太长，依然会自动拆分，不会影响内容的完整性。