Как разбить HTML-контент на страницы для печати, сохраняя при этом верхний и нижний колонтитулы на каждой странице ⇐ Html

[Anonymous]

Я пытаюсь распечатать отчет пациента с несколькими разделами (Лаборатория, Радиология, Клинические записи) в браузере с помощью window.print().
Я хочу следующего поведения:

• Каждая напечатанная страница должна иметь верхний и нижний колонтитул.
• Каждый раздел (Лаборатория, Радиология, Клинические записи) должен начинаться на новой странице.
• Если раздел (например, «Результаты лабораторных исследований») слишком длинный и не помещается на одной странице, его следует продолжить на следующей странице, сохранив верхний и нижний колонтитулы.

В настоящее время у меня есть такой HTML:

Код: Выделить всё

export const PrintPatientReport = ({
patient,
labResults = [],
radiologyResults = [],
clinicalNotes = [],
selectedSections,
reportDate
}) => {

const headerImg = "/header.png";
const footerImg = "/footer.png";

// Convert lab.result JSON to clean table rows
const formatLabResult = (lab) => {
try {
const data = typeof lab.result === "string" ? JSON.parse(lab.result) : lab.result;

if (data.image) {
return `
[img]${data.image.replace(/\\/g, [/img]
`;
}

return Object.entries(data)
.map(([key, val]) => `${key}${val}`)
.join("");

} catch (err) {
return `${lab.result}`;
}
};

// Lab Section
const labSection = selectedSections.lab && labResults.length > 0 ? `

Laboratory Results
${labResults.map(lab => `

Test NameResult


${lab.name || "N/A"}


${formatLabResult(lab)}






`).join("")}

` : "";

// Radiology Section
const radiologySection = selectedSections.radiology && radiologyResults.length > 0 ? `

Radiology Reports
${radiologyResults.map(r => `

[b]Report ID:[/b] ${r.request_id || "-"}

${r.result}

`).join("")}

` : "";

// Clinical Notes
const clinicalSection = selectedSections.clinical && clinicalNotes.length > 0 ? `

Doctor Clinical Notes
${clinicalNotes.map(note =>  `


Chief Complaint${note.chief_complaints || "-"}
Major Symptoms${note.major_symptoms || "-"}
Physical Exam${note.physical_examination || "-"}
Diagnosis${note.possible_dx || "-"}
Plan${note.plan || "-"}



`).join("")}

` : "";

const signatureSection = `

[b]Doctor Signature:[/b]
[b]Hospital Stamp:[/b]

`;

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

printWindow.document.write(`


Patient Report

@media print {
@page {
margin: 0; /* Let the container handle margins */
}
body {
margin: 0;
padding: 0;
}
.page {
width: 210mm;
height: 297mm;
padding: 0 20mm; /* Fixes left and right padding */
box-sizing: border-box;
page-break-after: always;
position: relative;
display: flex;
flex-direction: column;
}

.header {
height: 40mm; /* Define clear height for header */
display: flex;
align-items: center;
justify-content: center;
}

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

/* This div holds the text and scrolls/clips if too long */
.content-area {
flex: 1; /* Takes up all space between header and footer */
margin-bottom: 30mm; /* Reserves space so text never touches footer */
overflow: hidden;
}

.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30mm; /* Define fixed height for footer */
text-align: center;
}

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

/* Content styling */
h2.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;
}
}





[img]${headerImg}[/img]


[b]Patient Name:[/b] ${patient.fullname}

[b]Age:[/b] ${patient.age} | [b]Gender:[/b] ${patient.sex} | [b]Phone:[/b] ${patient.phone}

[b]Report Date:[/b] ${reportDate}

${selectedSections.lab ? labSection : ""}

[img]${footerImg}[/img]


${selectedSections.radiology ? `


[img]${headerImg}[/img]

${radiologySection}

[img]${footerImg}[/img]
` : ""}

${selectedSections.clinical ? `


[img]${headerImg}[/img]

${clinicalSection}
${signatureSection}

[img]${footerImg}[/img]
` : ""}


`);

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

Я пробовал использовать CSS-разрыв страницы: всегда; и фиксированная высота верхнего и нижнего колонтитула, но когда раздел «Лаборатория» занимает несколько страниц, верхний и нижний колонтитулы не повторяются, а содержимое перекрывается.
Как распечатать многостраничный контент с повторяющимися верхними и нижними колонтитулами, сохраняя при этом разрывы страниц раздела?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ter-on-eve