我正在开发发票管理系统和 django 的新手。我正在添加鸡蛋，当我点击它时，我插入了一个生成发票按钮，那里有一个 invoice.html 模板，我的数据在那里，我想打印它的发票。 （简单的发票不是专业的）。 当我单击“打印发票”按钮时，打印窗口已打开，但存在一个问题，发票内容在任何页面上均不可调整。 我想当我选择 A4 页面发票内容时根据 A4 页面大小进行调整，我已经应用媒体查询并为不同页面设置大小但内容不可调整并且在某些页面中它被移动到中心而一些页面它被移动到上或向下。
invoice.html 文件在这里...
<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 : [email protected] </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>
我只是希望我的内容可以在 A4、A3、A5 等每一页上进行调整