Warum erscheint mein Fußzeilenbild nach dem Inhalt, anstatt sich beim Drucken mehrseitiger HTML am Ende der letzten Seit - Programmiererforum

Warum erscheint mein Fußzeilenbild nach dem Inhalt, anstatt sich beim Drucken mehrseitiger HTML am Ende der letzten Seit ⇐ Java

Post Reply Previous topic Next topic

1 post • Page 1 of 1

Anonymous

Warum erscheint mein Fußzeilenbild nach dem Inhalt, anstatt sich beim Drucken mehrseitiger HTML am Ende der letzten Seit

Post by Anonymous » 08 Apr 2025, 00:07

function generateDischargeReport() {
// Get all form elements
const elements = {
patientName: document.getElementById("DRD.V.R1.FULLNAME"),
healthInfo: document.getElementById("DRD.V.R1.MEDICALHISTORY"),
doctorName: document.getElementById("DRD.V.R1.DOCTOR_ID"),
diagnosis: document.getElementById("DRD.V.R1.D"),
physicalExam: document.getElementById("DRD.V.R1.P"),
investigation: document.getElementById("DRD.V.R1.M"),
treatment: document.getElementById("DRD.V.R1.T"),
prescription: document.getElementById("DRD.V.R1.PH"),
nationalId: document.getElementById("DRD.V.R1.NATIONALID"),
age: document.getElementById("DRD.V.R1.AGE"),
phoneNumber: document.getElementById("DRD.V.R1.PHONE_NUMBER"),
pulse: document.getElementById("DRD.V.R1.PULSE"),
oxygen: document.getElementById("DRD.V.R1.OXYGEN"),
bloodPressure: document.getElementById("DRD.V.R1.BLOOD_PRESSURE"),
height: document.getElementById("DRD.V.R1.HEIGHT"),
bmi: document.getElementById("DRD.V.R1.BMI"),
respiratory: document.getElementById("DRD.V.R1.RESPIRATORY"),
weight: document.getElementById("DRD.V.R1.WEIGHT"),
temperature: document.getElementById("DRD.V.R1.TEMPRETURE"),
triageLevel: document.getElementById("DRD.V.R1.TRIAGE_LEVEL"),
headerImage: document.getElementById("DRD.V.R1.HEADERLINK"),
footerImage: document.getElementById("DRD.V.R1.FOOTER")
};

// Current date/time
const currentDate = new Date();
const formattedDate = currentDate.toLocaleDateString('en-US');
const formattedTime = currentDate.toLocaleTimeString('en-US');

// Get all values with fallbacks
const values = {};
for (const [key, element] of Object.entries(elements)) {
values[key] = element?.value.trim() ||
(key === 'patientName' ? 'Unknown Patient' :
key === 'doctorName' ? 'Unknown Doctor' :
key === 'diagnosis' ? 'No diagnosis information.' :
key === 'physicalExam' ? 'No physical examination information.' :
key === 'investigation' ? 'No medical investigation information.' :
key === 'treatment' ? 'No treatment procedure information.' :
key === 'healthInfo' ? 'Health information not provided.' : 'N/A');
}

// Format health info with highlights
const formattedHealthInfo = values.healthInfo.split('\n').map(line => {
if (line.includes('diagnosed with')) {
return `
${line}
`;
} else if (line.includes('services were provided')) {
return `
${line}
`;
} else if (line.includes('On')) {
return `
${line}
`;
}
return `
${line}
`;
}).join('');

// Medical vitals table
const vitalsTable = `

Medical Vitals

Pulse: ${values.pulse}
Oxygen: ${values.oxygen}
Blood Pressure: ${values.bloodPressure}

Height: ${values.height}
BMI: ${values.bmi}
Respiratory: ${values.respiratory}

Weight: ${values.weight}
Temperature: ${values.temperature}
Triage Level: ${values.triageLevel}

`;

// Prescriptions table
const prescriptions = values.prescription.split(',').filter(p => p.trim());
const prescriptionTable = prescriptions.length ? `

Prescriptions

${prescriptions.map(p => `${p.trim()}`).join('')}

` : '';

// HTML report content
const reportHTML = `

Discharge Report - ${values.patientName}

@page {
size: A4;
margin: 20mm;
}
html, body {
height: auto; /* Changed to auto */
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #333;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Consider removing or adjusting */
background-color: #f4f7f6;
}
.header-img {
max-width: 95%;
height: auto;
display: block;
margin: 0 auto 20px auto;
}
.content-container {
width: 70%;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 10px;
flex: 1; /* Allows content to grow and push footer down */
}
h1 {
color: #2a7f55;
font-size: 28px;
text-align: center;
}
h2 {
font-size: 22px;
color: #2a7f55;
margin-top: 20px;
}
.highlight {
color: #007b5e;
}
.date-time {
text-align: right;
font-size: 14px;
color: #777;
}
.box {
border: 2px solid #ccc;
padding: 10px;
margin-top: 20px;
border-radius: 10px;
background-color: #f9f9f9;
break-inside: avoid; /* Prevent boxes from breaking across pages */
}
.box-title {
font-weight: bold;
color: #2a7f55;
margin-bottom: 8px;
font-size: 18px;
}
.highlight-date {
color: #007b5e;
font-weight: bold;
}
.highlight-diagnosis {
color: #e74c3c;
font-weight: bold;
}
.highlight-services {
color: #3498db;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
break-inside: avoid; /* Prevent tables from breaking across pages */
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.footer-container {
width: 100%;
text-align: center;
padding: 20px 0;
background-color: #f4f7f6;
margin-top: auto; /* Push footer to the bottom */
}
.footer-img {
max-width: 95%;
height: auto;
display: block;
margin: 0 auto;
}
@media print {
body {
background-color: white;
display: block;
}
.content-container {
box-shadow: none;
width: 100%;
padding: 0;
border-radius: 0;
}
.footer-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin-top: 0; /* Reset margin-top for fixed positioning */
}
.box {
break-inside: avoid;
}
table {
break-inside: avoid;
}
}

${values.headerImage ? `

` : ''}

Discharge Report

Report generated on: ${formattedDate} at ${formattedTime}

Patient Information
Patient Name: ${values.patientName}
Identification No.: ${values.nationalId}
Age: ${values.age}
Phone Number: ${values.phoneNumber}

Doctor Information
Doctor Name: ${values.doctorName}

${vitalsTable}

Health Information
${formattedHealthInfo}

Diagnosed
${values.diagnosis}

Physical Examination
${values.physicalExam}

Medical Investigation
${values.investigation}

Treatment Procedure
${values.treatment}

${prescriptionTable}

${values.footerImage ? `

` : ''}

`;

// Create and download the report
const blob = new Blob([reportHTML], { type: 'text/html' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = `${values.patientName.replace(/ /g, '_')}_Discharge_Report.html`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
}
< /code>
Ich generiere einen Entladungsbericht als herunterladbarer .html -Datei mit JavaScript. Der Bericht enthält: < /p>
Ein Header -Bild oben (rendern fein), < /p>
Dynamischer Inhalt, der mehrere Seiten umfassen kann, < /p>
Ein Fußzeilenbild, das nur einmal angezeigt werden sollte, am unteren Rand der letzten gedruckten Seite. Inhalt - aber nicht unbedingt am Ende der letzten Seite. In längeren Berichten erscheint es unmittelbar nach dem Ende des Inhalts, der auf halber Strecke auf einer Seite sein könnte, und hinterlässt einen großen leeren Raum darunter. /> Was ich ausprobiert habe:
Ich habe das Fußzeilenbild wie dieses in meinem HTML platziert: < /p>
${values.footerImage ? `

` : ''}
< /code>
Und mein CSS enthält: < /p>
.footer-container {
width: 100%;
text-align: center;
padding: 20px 0;
background-color: #f4f7f6;
}
.footer-img {
max-width: 95%;
height: auto;
display: block;
margin: 0 auto;
}
@media print {
.footer-container {
page-break-before: avoid;
page-break-after: avoid;
page-break-inside: avoid;
}
}
< /code>
Ich habe auch versucht, Position hinzuzufügen: behoben; unten: 0; zu .foter-container, aber das platziert die Fußzeile am Ende jeder Seite, was ich nicht möchte. geschätzt.

1744063627

Anonymous

function generateDischargeReport() {
// Get all form elements
const elements = {
patientName: document.getElementById("DRD.V.R1.FULLNAME"),
healthInfo: document.getElementById("DRD.V.R1.MEDICALHISTORY"),
doctorName: document.getElementById("DRD.V.R1.DOCTOR_ID"),
diagnosis: document.getElementById("DRD.V.R1.D"),
physicalExam: document.getElementById("DRD.V.R1.P"),
investigation: document.getElementById("DRD.V.R1.M"),
treatment: document.getElementById("DRD.V.R1.T"),
prescription: document.getElementById("DRD.V.R1.PH"),
nationalId: document.getElementById("DRD.V.R1.NATIONALID"),
age: document.getElementById("DRD.V.R1.AGE"),
phoneNumber: document.getElementById("DRD.V.R1.PHONE_NUMBER"),
pulse: document.getElementById("DRD.V.R1.PULSE"),
oxygen: document.getElementById("DRD.V.R1.OXYGEN"),
bloodPressure: document.getElementById("DRD.V.R1.BLOOD_PRESSURE"),
height: document.getElementById("DRD.V.R1.HEIGHT"),
bmi: document.getElementById("DRD.V.R1.BMI"),
respiratory: document.getElementById("DRD.V.R1.RESPIRATORY"),
weight: document.getElementById("DRD.V.R1.WEIGHT"),
temperature: document.getElementById("DRD.V.R1.TEMPRETURE"),
triageLevel: document.getElementById("DRD.V.R1.TRIAGE_LEVEL"),
headerImage: document.getElementById("DRD.V.R1.HEADERLINK"),
footerImage: document.getElementById("DRD.V.R1.FOOTER")
};

// Current date/time
const currentDate = new Date();
const formattedDate = currentDate.toLocaleDateString('en-US');
const formattedTime = currentDate.toLocaleTimeString('en-US');

// Get all values with fallbacks
const values = {};
for (const [key, element] of Object.entries(elements)) {
values[key] = element?.value.trim() ||
(key === 'patientName' ? 'Unknown Patient' :
key === 'doctorName' ? 'Unknown Doctor' :
key === 'diagnosis' ? 'No diagnosis information.' :
key === 'physicalExam' ? 'No physical examination information.' :
key === 'investigation' ? 'No medical investigation information.' :
key === 'treatment' ? 'No treatment procedure information.' :
key === 'healthInfo' ? 'Health information not provided.' : 'N/A');
}

// Format health info with highlights
const formattedHealthInfo = values.healthInfo.split('\n').map(line => {
if (line.includes('diagnosed with')) {
return `
${line}
`;
} else if (line.includes('services were provided')) {
return `
${line}
`;
} else if (line.includes('On')) {
return `
${line}
`;
}
return `
${line}
`;
}).join('');

// Medical vitals table
const vitalsTable = `

Medical Vitals


[b]Pulse:[/b] ${values.pulse}
[b]Oxygen:[/b] ${values.oxygen}
[b]Blood Pressure:[/b] ${values.bloodPressure}


[b]Height:[/b] ${values.height}
[b]BMI:[/b] ${values.bmi}
[b]Respiratory:[/b] ${values.respiratory}


[b]Weight:[/b] ${values.weight}
[b]Temperature:[/b] ${values.temperature}
[b]Triage Level:[/b]  ${values.triageLevel}


`;

// Prescriptions table
const prescriptions = values.prescription.split(',').filter(p => p.trim());
const prescriptionTable = prescriptions.length ? `

Prescriptions

${prescriptions.map(p => `${p.trim()}`).join('')}

` : '';

// HTML report content
const reportHTML = `



Discharge Report - ${values.patientName}

@page {
size: A4;
margin: 20mm;
}
html, body {
height: auto; /* Changed to auto */
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #333;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Consider removing or adjusting */
background-color: #f4f7f6;
}
.header-img {
max-width: 95%;
height: auto;
display: block;
margin: 0 auto 20px auto;
}
.content-container {
width: 70%;
margin: 0 auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 10px;
flex: 1; /* Allows content to grow and push footer down */
}
h1 {
color: #2a7f55;
font-size: 28px;
text-align: center;
}
h2 {
font-size: 22px;
color: #2a7f55;
margin-top: 20px;
}
.highlight {
color: #007b5e;
}
.date-time {
text-align: right;
font-size: 14px;
color: #777;
}
.box {
border: 2px solid #ccc;
padding: 10px;
margin-top: 20px;
border-radius: 10px;
background-color: #f9f9f9;
break-inside: avoid; /* Prevent boxes from breaking across pages */
}
.box-title {
font-weight: bold;
color: #2a7f55;
margin-bottom: 8px;
font-size: 18px;
}
.highlight-date {
color: #007b5e;
font-weight: bold;
}
.highlight-diagnosis {
color: #e74c3c;
font-weight: bold;
}
.highlight-services {
color: #3498db;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
break-inside: avoid; /* Prevent tables from breaking across pages */
}
table, th, td {
border: 1px solid #ddd;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.footer-container {
width: 100%;
text-align: center;
padding: 20px 0;
background-color: #f4f7f6;
margin-top: auto;  /* Push footer to the bottom */
}
.footer-img {
max-width: 95%;
height: auto;
display: block;
margin: 0 auto;
}
@media print {
body {
background-color: white;
display: block;
}
.content-container {
box-shadow: none;
width: 100%;
padding: 0;
border-radius: 0;
}
.footer-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
margin-top: 0; /* Reset margin-top for fixed positioning */
}
.box {
break-inside: avoid;
}
table {
break-inside: avoid;
}
}



${values.headerImage ? `
[img]${values.headerImage}[/img]
` : ''}

Discharge Report

Report generated on: ${formattedDate} at ${formattedTime}

Patient Information
Patient Name: ${values.patientName}
Identification No.: ${values.nationalId}
Age: ${values.age}
Phone Number: ${values.phoneNumber}

Doctor Information
Doctor Name: ${values.doctorName}

${vitalsTable}

Health Information
${formattedHealthInfo}

Diagnosed
${values.diagnosis}


Physical Examination
${values.physicalExam}


Medical Investigation
${values.investigation}


Treatment Procedure
${values.treatment}


${prescriptionTable}


${values.footerImage ? `

[img]${values.footerImage}[/img]
` : ''}


`;

// Create and download the report
const blob = new Blob([reportHTML], { type: 'text/html' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = `${values.patientName.replace(/ /g, '_')}_Discharge_Report.html`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
}
< /code>
Ich generiere einen Entladungsbericht als herunterladbarer .html -Datei mit JavaScript. Der Bericht enthält: < /p>
Ein Header -Bild oben (rendern fein), < /p>
Dynamischer Inhalt, der mehrere Seiten umfassen kann, < /p>
Ein Fußzeilenbild, das nur einmal angezeigt werden sollte, am unteren Rand der letzten gedruckten Seite.  Inhalt - aber nicht unbedingt am Ende der letzten Seite. In längeren Berichten erscheint es unmittelbar nach dem Ende des Inhalts, der auf halber Strecke auf einer Seite sein könnte, und hinterlässt einen großen leeren Raum darunter. />  Was ich ausprobiert habe:
Ich habe das Fußzeilenbild wie dieses in meinem HTML platziert: < /p>
${values.footerImage ? `

[img]${values.footerImage}[/img]
` : ''}
< /code>
Und mein CSS enthält: < /p>
.footer-container {
width: 100%;
text-align: center;
padding: 20px 0;
background-color: #f4f7f6;
}
.footer-img {
max-width: 95%;
height: auto;
display: block;
margin: 0 auto;
}
@media print {
.footer-container {
page-break-before: avoid;
page-break-after: avoid;
page-break-inside: avoid;
}
}
< /code>
Ich habe auch versucht, Position hinzuzufügen: behoben; unten: 0; zu .foter-container, aber das platziert die Fußzeile am Ende jeder Seite, was ich nicht möchte. geschätzt.

Post Reply Previous topic Next topic

1 post • Page 1 of 1

Quick Reply

Username:

Change Text Case:

Smilies

View more smilies

Similar Topics

Replies

Views

Last post

Warum erscheint mein Fußzeilenbild nach dem Inhalt, anstatt sich beim Drucken mehrseitiger HTML am Ende der letzten Seit

Last post by Anonymous « 09 Apr 2025, 00:32
Posted in HTML

by Anonymous » 09 Apr 2025, 00:32 » in HTML

function generateDischargeReport() {
// Get all form elements
const elements = {
patientName: document.getElementById( DRD.V.R1.FULLNAME ),
healthInfo: document.getElementById(...

0 Replies

3 Views

Last post by Anonymous
09 Apr 2025, 00:32
Warum erscheint mein Fußzeilenbild nach dem Inhalt, anstatt sich beim Drucken mehrseitiger HTML am Ende der letzten Seit

Last post by Anonymous « 09 Apr 2025, 00:32
Posted in CSS

by Anonymous » 09 Apr 2025, 00:32 » in CSS

function generateDischargeReport() {
// Get all form elements
const elements = {
patientName: document.getElementById( DRD.V.R1.FULLNAME ),
healthInfo: document.getElementById(...

0 Replies

4 Views

Last post by Anonymous
09 Apr 2025, 00:32
Verwenden Sie die Epochenzeit in Sekunden, um Tage seit der Epoche anzuzeigen, Jahre seit Epochen und Stunden, Minuten u

Last post by Anonymous « 24 Feb 2025, 13:02
Posted in Python

by Anonymous » 24 Feb 2025, 13:02 » in Python

import time

#Program is supposed to use epoch time to accurately display to
#user the amount of days since epoch, years since epoch and
#display the time hours, minutes and seconds.

epoch =...

0 Replies

11 Views

Last post by Anonymous
24 Feb 2025, 13:02
Warum unterscheidet sich der Inhalt durch httpurlConnection getInputStream vom Inhalt über Linux -Befehl curl oder wGet?

Last post by Anonymous « 11 Apr 2025, 11:18
Posted in Java

by Anonymous » 11 Apr 2025, 11:18 » in Java

0 Replies

7 Views

Last post by Anonymous
11 Apr 2025, 11:18
Verfolgen Sie Statistikzeiträume (Anzeigen der Statistiken der letzten 7 Tage, des letzten Monats usw. in der App).

Last post by Guest « 11 Jan 2025, 08:47
Posted in Php

by Guest » 11 Jan 2025, 08:47 » in Php

Ich arbeite an einem Laravel-Projekt, bei dem ich Spielerstatistiken für verschiedene Zeiträume anzeigen muss (letzter Tag, letzte Woche, letzter Monat und insgesamt). Die Statistiken werden in einem...

0 Replies

30 Views

Last post by Guest
11 Jan 2025, 08:47

Return to “Java”