<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Report Card</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
font-size: 12px; /* Reduced font size */
}
.container {
width: 100%;
margin: 0 auto;
padding: 10px; /* Decreased padding */
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
page-break-inside: avoid;
}
h1, h2, h3, h4, p {
text-align: center;
margin: 5px 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 5px; /* Decreased margin */
}
th, td {
padding: 6px; /* Reduced padding */
border-bottom: 1px solid #ccc;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.personal-details-container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
.personal-details-column {
width: 48%; /* Slightly reduced width */
margin-bottom: 5px; /* Decreased margin */
}
.single-heading {
width: 100%;
text-align: center;
margin-bottom: 5px; /* Decreased margin */
}
.signatures {
display: flex;
justify-content: space-between;
margin-top: 10px; /* Decreased margin */
}
.overall-marks table {
margin: 0 auto;
margin-top: 5px; /* Decreased margin */
}
.overall-marks th, .overall-marks td {
padding: 4px; /* Reduced padding */
}
.term-container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
.term {
width: 48%;
}
/* Additional styling */
.term-heading {
font-size: 16px; /* Reduced font size */
margin-bottom: 5px; /* Decreased margin */
}
.overall-marks h4 {
font-size: 12px; /* Reduced font size */
}
.academics-heading {
margin-bottom: 0; /* Reduced margin */
}
@media print {
body {transform: scale(.95);margin: none;}
table {page-break-inside: avoid;}
}
</style>
</head>
<body>
<div class="container">
<h1><img src="https://firebasestorage.googleapis.com/v0/b/utkarsh-rana.appspot.com/o/download.jpg?alt=media&token=c2f5bd47-437b-46fc-b703-fd273002bbf4" alt="School Logo" width="69" height="39"> NATIONAL SCHOOL</h1>
<h2>REPORT CARD</h2>
<h3 class="single-heading">Personal Details</h3>
<div class="personal-details-container">
<div class="personal-details-column">
<table>
<tr>
<th>Student ID</th>
<td>{{sid}}</td>
</tr>
<tr>
<th>Name</th>
<td>{{name}}</td>
</tr>
<tr>
<th>Father's Name</th>
<td>{{fname}}</td>
</tr>
<tr>
<th>Mother's Name</th>
<td>{{mname}}</td>
</tr>
</table>
</div>
<div class="personal-details-column">
<table>
<tr>
<th>Class</th>
<td>{{class}}</td>
</tr>
<tr>
<th>Section</th>
<td>{{section}}</td>
</tr>
<tr>
<th>Roll No</th>
<td>{{roll}}</td>
</tr>
<tr>
<th>Address</th>
<td>{{address}}</td>
</tr>
</table>
</div>
</div>
<h3 class="single-heading">ACADEMICS</h3>
<div class="term-container">
<div class="term">
<h4 class="term-heading">TERM I</h4>
<table>
<tr>
<th>Subjects</th>
<th>Subject Enrichment</th>
<th>Notebook</th>
<th>Periodic Test</th>
<th>Half Yearly</th>
</tr>
<tr>
<td>English</td>
<td>{{ense}}</td>
<td>{{ennb}}</td>
<td>{{enpt}}</td>
<td>{{enmain}}</td>
</tr>
<tr>
<td>Hindi</td>
<td>{{hise}}</td>
<td>{{hinb}}</td>
<td>{{hipt}}</td>
<td>{{himain}}</td>
</tr>
<tr>
<td>Mathematics</td>
<td>{{mase}}</td>
<td>{{manb}}</td>
<td>{{mapt}}</td>
<td>{{scmain}}</td>
</tr>
<tr>
<td>Science</td>
<td>{{scse}}</td>
<td>{{scnb}}</td>
<td>{{scpt}}</td>
<td>{{scmain}}</td>
</tr>
<tr>
<td>Social Science</td>
<td>{{sose}}</td>
<td>{{sonb}}</td>
<td>{{sopt}}</td>
<td>{{somain}}</td>
</tr>
<tr>
<td>Computer</td>
<td>{{cose}}</td>
<td>{{conb}}</td>
<td>{{copt}}</td>
<td>{{comain}}</td>
</tr>
<!-- Repeat for other subjects -->
</table>
</div>
<div class="term">
<h4 class="term-heading">TERM II</h4>
<table>
<tr>
<th>Subject Enrichment</th>
<th>Notebook</th>
<th>Periodic Test</th>
<th>Yearly</th>
<th>Grade</th>
<th>Total</th>
</tr>
<tr>
<td>{{ense2}}</td>
<td>{{ennb2}}</td>
<td>{{enpt2}}</td>
<td>{{enmain2}}</td>
<td>{{engrade}}</td>
<td>{{ent}}</td>
</tr>
<tr>
<td>{{hise2}}</td>
<td>{{hinb2}}</td>
<td>{{hipt2}}</td>
<td>{{himain2}}</td>
<td>{{higrade}}</td>
<td>{{hit}}</td>
</tr>
<tr>
<td>{{mase2}}</td>
<td>{{manb2}}</td>
<td>{{mapt2}}</td>
<td>{{scmain2}}</td>
<td>{{magrade}}</td>
<td>{{mat}}</td>
</tr>
<tr>
<td>{{scse2}}</td>
<td>{{scnb2}}</td>
<td>{{scpt2}}</td>
<td>{{scmain2}}</td>
<td>{{scgrade}}</td>
<td>{{sct}}</td>
</tr>
<tr>
<td>{{sose2}}</td>
<td>{{sonb2}}</td>
<td>{{sopt2}}</td>
<td>{{somain2}}</td>
<td>{{sograde}}</td>
<td>{{sot}}</td>
</tr>
<tr>
<td>{{cose2}}</td>
<td>{{conb2}}</td>
<td>{{copt2}}</td>
<td>{{comain2}}</td>
<td>{{cograde}}</td>
<td>{{cot}}</td>
</tr>
<!-- Repeat for other subjects -->
<tr class="totals-row">
<th colspan="5">Total</th>
<td>{{term2Total}}</td>
</tr>
</table>
</div>
</div>
<div class="overall-marks">
<table>
<tr class="totals-row">
<th>Total Working Days</th>
<td colspan="3">{{totalWorkingDays}}</td>
<th>Total Present Days</th>
<td colspan="3">{{presentDays}}</td>
</tr>
<tr>
<th colspan="3">Overall Marks</th>
<td colspan="5">{{overallMarks}}</td>
</tr>
<tr>
<th colspan="3">Overall Grade</th>
<td colspan="5">{{overallGrade}}</td>
</tr>
</table>
</div>
<div class="signatures">
<div>
<h4>Principal's Signature</h4>
</div>
<div>
<h4>Class Teacher's Signature</h4>
</div>
</div>
</div>
</body>
</html>
Above is HTML template I’m trying to convert into pdf using python-pdfkit.
1.This is how template looks in web browser.
- This is how the template looks after converting into pdf.
code used to convert html into pdf:-
import pdfkit
pdfkit.from_file('rp2.html','test.pdf')
Tried converting HTML template to pdf but PDFKIT changed the position and alignment of content from how it appeared on the web browser