I am working on an invoice management system and a newbie in django. I am adding the eggs and i have generate invoice button when i click on it there is an invoice.html template where my data is goes and i want to print its Invoice. (simple invoice not a professional).
When i click on Print Invoice button print window is open but there is one issue, The content of invoice is not adjustable on any page. i want when i select A4 page invoice content is adjust according to A4 page size, I have apply Media Query and set size for different pages but content is not adjustable and in some pages it is moved to center and some pages it is moved to up or down.
invoice.html file is here…
<html>
<head>
</head>
<body>
<div id="invoice-POS" style=" padding: 2mm; margin: 0 auto; width: 80mm; ">
<style>
@media print {
/* Set the page size to A4 */
@page {
size: A4;
margin: 0;
}
/* Set the font size of the invoice content */
#invoice-POS {
font-size: 12px;
}
/* Adjust the size and position of the logo */
#invoice-POS #top .logo {
height: 70px;
width: 70px;
background-size: 70px 70px;
}
/* Adjust the size and position of the client logo */
#invoice-POS .clientlogo {
height: 70px;
width: 70px;
background-size: 70px 70px;
border-radius: 50%;
}
/* Adjust the width of the item column */
#invoice-POS .item {
width: 30mm;
}
/* Hide unnecessary table headers */
#invoice-POS .tabletitle th:nth-of-type(3),
#invoice-POS .tabletitle th:nth-of-type(4),
#invoice-POS .tabletitle th:nth-of-type(5) {
display: none;
}
}
@Media print{button{display: None;}}
#invoice-POS ::selection {background: #f31544; color: #FFF;}
#invoice-POS ::moz-selection {background: #f31544; color: #FFF;}
#invoice-POS h1 {font-size: 1.5em; color: #222;}
#invoice-POS h2 {font-size: .9em;}
#invoice-POS h3 {font-size: 1.2em; font-weight: 300; line-height: 2em;}
#invoice-POS p {font-size: .7em; color: #666; line-height: 1.2em;}
#invoice-POS #top, #invoice-POS #mid, #invoice-POS #bot {border-bottom: 1px solid #EEE;}
#invoice-POS #top {min-height: 100px;}
#invoice-POS #mid {min-height: 80px;}
#invoice-POS #bot {min-height: 50px;}
#invoice-POS #top .logo {height: 60px; width: 60px; background: url(http://michaeltruong.ca/images/logo1.png) no-repeat; background-size: 60px 60px;}
#invoice-POS .clientlogo {float: left; height: 60px; width: 60px; background: url(http://michaeltruong.ca/images/client.jpg) no-repeat; background-size: 60px 60px; border-radius: 50px;}
#invoice-POS .info {display: block; margin-left: 0;}
#invoice-POS .title {float: right;}
#invoice-POS .title p {text-align: right;}
#invoice-POS table {width: 100%; border-collapse: collapse;}
#invoice-POS td {padding: 5px 0 5px 15px; border: 1px solid #EEE;}
#invoice-POS .tabletitle {padding: 5px; font-size: .5em; background: #EEE;}
#invoice-POS .service {border-bottom: 1px solid #EEE;}
#invoice-POS .item {width: 24mm;}
#invoice-POS .itemtext {font-size: .5em;}
#invoice-POS #legalcopy {margin-top: 5mm;}
</style>
<center id="top">
<div class="logo"></div>
<div class="info">
<h2 style="font-size: 20px;">Friends Poltery</h2>
</div>
</center>
<div id="mid">
<div class="info" style="font-size: 20px;">
<h2>Contact Info</h2>
<p>
Address : 54AB, Street A04 </br>
Email : abc@gmail.com </br>
Phone : +92-435-9875 </br>
</p>
</div>
</div>
<div id="bot">
<div id="table">
<table style="font-size: 20px;">
<center> <h2>Invoice for "{{ egg.eggType }} egg"</h2></center>
<tr>
<th>Egg Size</th>
<th>Egg Weight</th>
<th>Egg Price</th>
</tr>
<tr>
<td>{{ egg.eggSize }}</td>
<td> {{ egg.eggWeight }}</td>
<td>{{ egg.eggPrice }}</td>
</table><br><br>
<center><button onclick="window.print()">Print Invoice</button></center>
</table>
</div>
<div id="legalcopy">
<p class="legal"><strong>Thank you for your business!</strong> Payment is expected within 31 days; please process this invoice within that time. There will be a 5% interest charge per month on late invoices.
</p>
</div>
</div>
</div>
</body>
</html>