Dynamischer Textkörperinhalt, der sich mit Kopf- und Fußzeile in PDF überschneidet, mithilfe von useReactToPrint ⇐ CSS

[Guest]

Ich versuche, ein PDF mit useReactToPrint zu erstellen.

Code: Select all

Requirement:

Ich möchte, dass auf jeder Seite eine feste Kopf- und Fußzeile angezeigt wird und dazwischen im Hauptteil dynamischer Inhalt generiert wird. Wenn auf der aktuellen Seite kein Platz mehr zum Rendern vorhanden ist, sollte zur nächsten Seite gewechselt werden und nach der Kopfzeile mit dem Drucken begonnen werden. (Ich hoffe, ich habe die Anforderung klar dargelegt) Beispiel:
Header
{Dynamischer Inhalt
Fußzeile
-> auf jeder Seite.
Ich habe es mit CSS geschafft, auf jeder Seite feste Kopf- und Fußzeilen zu haben, aber sie überlappen sich zuerst mit der Fußzeile Seite und mit Kopf- und Fußzeile auf jeder nächsten Seite. Wie kann ich dafür sorgen, dass der dynamische Inhalt zwischen ihnen gerendert wird und sich Kopf- und Fußzeile nicht überlappen?
Mir ist die Eigenschaft „Seitenumbruch“ bekannt, mit der ich einen Seitenumbruch hinzufügen kann manuell wo auch immer, aber ich bin nicht sicher genug, da es sich um einen manuellen Eingriff handelt.
Screenshot von dem, was jetzt passiert, wird hinzugefügt (einige Inhalte wurden unscharf gemacht, da sie vertrauliche Informationen enthalten):


Code:

Code: Select all

import {
formatInvoiceData,
getFormattedNumber,
isAbnormal,
isOutsideRange,
summaryReason,
} from '../../../utils'
import { forwardRef, useEffect, useState } from 'react'
import { startSxpProxy } from '../../../../../utils/api'
import {
InvoiceData,
InvoicePanel,
InvoiceTest,
LmsOrder,
labDepartments,
numericOutcome,
} from '../../../models'
import { intent } from '../../../../administration/constants'
import { LABS_PROJECT_ID } from '../../../../../utils/constants'
import { Box, Typography } from '@mui/material'
import medunitedLogo from '../../../../../assets/images/medunited.png'
import LocationOnIcon from '@mui/icons-material/LocationOn'
import CallIcon from '@mui/icons-material/Call'
import EmailIcon from '@mui/icons-material/Email'
import './PatientReport.css'
import { invoiceDateTimeFormat } from '../../../../../utils/dateUtils'
import JsBarcode from 'jsbarcode'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'

interface Props {
item: LmsOrder
labDepartments: labDepartments[]
locationAddress: any
pathologySignature: any
}

type ORProps = {
title: string
content: any
boldContent?: boolean
}

const styles = {
boldText: {
fontFamily: 'Roboto',
fontWeight: 'bold',
},
}

const TopLine = () => {
return (




)
}

const Logo = () => {
return (

[img]{medunitedLogo} /[/img]

)
}

const HeaderData = ({ data }: { data: InvoiceData }) => (






Reg. Address: {data?.patientAddress?.address?.line?.[0]}






{data?.patientAddress?.telecom?.[1]?.value}





{data?.patientAddress?.telecom?.[0]?.value}




)

const InvoiceFooter = () => (


1.  This Is An Electronically Authenticated Report.


2.  Please Correlate With Clinical Findings, Consult a Doctor For
Discussion & Further Medication


)

const PanelView = ({
panel,
isLast,
summary,
}: {
panel: InvoicePanel
index: number
isLast: boolean
summary: string
}) => {
const organization = panel?.tests?.[0]?.organization
return (


Department of 
{panel?.department?.department_name?.toUpperCase() ?? 'N/A'}

{panel?.resultType === 'Observation' ? (

) : (

)}
{panel?.tests?.[0]?.summaryReason && (

Impression:

{summaryReason(panel?.tests?.[0]?.summaryReason)}


)}
{organization?.name && (
Note: Test processed at {organization?.name}
)}
{panel?.interpretation && (

Interpretation:
{panel?.interpretation}

)}
{panel?.interpretationImage && (

[img]{panel?.interpretationImage} /[/img]

)}
{isLast && summary ?  : null}


)
}

const InvoiceSummary = ({ text }: { text: string }) => (
Summary: {text}
)

const ObservationRow = ({ title, content }: ORProps) => {
return (

{title}: 
{content}

)
}

const ObservationView = ({ panel }: { panel: InvoicePanel }) => {
const test = panel?.tests?.[0]
const sample = test?.values?.summary?.replace(/\\+/g, '\\')

return (


{test?.values?.observations?.length > 0 &&
test?.values?.observations?.map((tvo) => (

))}


)
}

const SignatureView = ({ panel }: { panel: InvoicePanel }) => {
return (

{panel?.tests?.[0]?.enteredName && (

{panel?.tests?.[0]?.enteredName}
Technician

)}

{panel?.pathologySignature && (
[img]{panel?.pathologySignature} /[/img]
)}
{panel?.pathologyName && (

Dr.{panel?.pathologyName}
({panel?.tests?.[0]?.pathologyDepartment})

)}


)
}

const Row = ({ dt }: { dt: InvoiceTest }) =>  {
console.log(dt?.range)
return (


{dt?.name}
Method: {dt?.method || '-'}



{getFormattedNumber(dt?.value)}

{dt?.resultType === numericOutcome && dt?.rangeValue && (
({dt?.rangeValue ?? ''})
)}
{dt?.extraValue && {dt?.extraValue}}

{dt?.unit || '-'}

{dt?.resultType === numericOutcome ? (
dt?.range?.map((rangeValue: any) => (
{rangeValue?.trim()}
))
) : (
{dt?.range?.join(' - ') || '-'}
)}


)
}

const NormalView = ({ panel }: { panel: InvoicePanel }) => (

Test Name: {panel?.name}
Sample Type: {panel?.sample}



Parameter Name
Value
Unit
Biological-Ref-Range



{panel?.tests?.map((pt) => (

))}



)

const HeaderRow = ({
label,
value,
}: {
label: string
value: string | number
}) => (

{label}
: {value}

)

const InvoiceHeader = ({ data }: { data: InvoiceData }) => (










{data?.requestedBy?.indexOf('[') >  0 ? (




) : (

)}





[img]{generateBarcodeImage(data?.lrNumber ?? data?.id)} /[/img]



)

const barcodeOptions = {
format: 'CODE128',
width: 2,
height: 40,
displayValue: false,
}

const generateBarcodeImage = (data: any) => {
const canvas = document.createElement('canvas')
JsBarcode(canvas, data, barcodeOptions)
return canvas.toDataURL('image/png')
}

const PatientReport = forwardRef(function PatientReport(
{ item, labDepartments, locationAddress, pathologySignature },
ref
) {
const [pdfData, setPdfData] = useState(null)

const createPdf = async () => {
const panelIds =
item?.panels?.flatMap((ip) => ip?.lab_tests?.map((ipl) => ipl?.id)) ?? []
const testIds = item?.lab_tests?.map((il) => il?.id) ?? []
const state = {
orderId: item?.id,
ids: [...panelIds, ...testIds],
}

try {
const data = await startSxpProxy(
LABS_PROJECT_ID,
intent?.getLabTestsByIds,
state
)
const panels = formatInvoiceData(
data?.data?.lab_test ?? [],
item?.status ?? '',
labDepartments
)

const obj = {
id: item?.patientUhid ?? item?.patientThopId ?? item?.patient_id ?? '',
name: item?.patientName,
patientAddress: locationAddress,
age: item?.patientAge,
gender: item?.patientGender,
mobile: item?.patientMobile ?? '',
lrNumber: item?.lr_number ?? '',
orderType: item?.origin ?? '',
orderedOn: item?.ordered_on ?? '',
completedOn: item?.collection_completed_on ?? '',
requestedBy: item?.requested_by ?? item?.ordered_by_name ?? '',
validatedOn: item?.validation_completed_on ?? '',
panels: panels,
summary: item?.summary ? item?.summary : '',
invoiceWithHeaderValue: true,
pathologySignature: pathologySignature ?? '',
pathologistName: item?.authorised_by_name,
}
setPdfData(obj)
} catch (error) {
console.error(error)
throw error
}
}

useEffect(() => {
createPdf()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

if (!pdfData) return Failed to get Lab report data
return (











{pdfData?.panels?.map((p: InvoicePanel, i: any, arr: any) =>  (
key={i}
panel={p}
index={i}
isLast={arr.length === i + 1}
summary={pdfData?.summary}
/>
))}






)
})

export default PatientReport

und CSS-Datei:

Code: Select all

@media print {
body {
background-color: white;
margin: 0;
}

.print-header {
position: fixed;
top: 0;
left: 0;
right: 0;
text-align: center;
}

.print-footer {
border: 5px solid green;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}

.main-content {
border: 5px solid red;
margin-top: 340px;
margin-bottom: 200px;
}

.page-break {
page-break-before: always;
}

.avoid-break {
page-break-inside: avoid;
}
}

Wie kann ich das beheben?
Ich habe versucht, die CSS-Eigenschaft page-brake zu verwenden, möchte aber, dass der dynamische Inhalt zwischen fester Kopf- und Fußzeile angezeigt wird.< /P>