I have a task where I need to implement an invoice system that produces an HTML web page of the invoice, which is then printed to a PDF file.
The invoice that I'm outputing is shown in the following image.
What I now need to do is alter my code, so that it produces page breaks at the page boundaries to match the page size of my PDF output. Currently it does not do this, but instead just keeps printing an extended image across the pages that are printed.
Here is the HTML Code I'm currently using:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<style></style>
</head>
<body>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 52.0mm; left: 20.0mm; height: 5.0mm; width: 70.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Das ist ein Text</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 57.0mm; left: 20.0mm; height: 30.0mm; width: 60.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Das ist ein Test</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 100.0mm; left: 20.0mm; height: 7.0mm; width: 107.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Headline</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 110.0mm; left: 20.0mm; height: 20.0mm; width: 178.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Introduction Text</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 243.0mm; left: 20.0mm; height: 3.0mm; width: 170.0mm;">
<hr style="margin-top: 2mm; margin-bottom: 0mm; width: 170.0mm; border-color:#000000; height: 1.0mm" />
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 247.0mm; left: 20.0mm; height: 30.0mm; width: 70.0mm;page-break-after:auto ">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Footer1</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 247.0mm; left: 120.0mm; height: 30.0mm; width: 70.0mm;page-break-after:auto ">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Footer2</span>
</div>
<div style="border-style: solid; border-width: 0.5mm; border-color: #000000; background-color: null; position: absolute; top: 10.0mm; left: 140.0mm; height: 40.0mm; width: 50.0mm;">
<span style="font-size:11px; font-family:arial,helvetica,sans-serif">Logo</span>
</div>
<div style="position: absolute; top: 150.0mm; left: 20.0mm; height: 50.0mm; width: 170.0mm; page-break-after:always;">
<table style="page-break-after:always;">
<tr style="page-break-after:always;">
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #005fbf">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Position</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Artikelnr</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Beschreibung</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Menge</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Preis (Netto)</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Preis (Brutto)</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Gesamtsumme (Netto):</strong>
</span>
</div>
</td>
<td valign="middle" style="height: 5.0mm; width: 70.0mm; background-color: #none">
<div style="text-align: center;">
<span style="text-align: center; font-size:11px; font-family: arial,helvetica,sans-serif; color: #000000;">
<strong>Gesamtpreis (Brutto)</strong>
</span>
</div>
</td>
</tr>
<tr>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">2</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif"></span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif"></span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">1.0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0.0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0.0</span></td>
<td style="background-color: #none"<span style="font-size:11px; font-family:arial,helvetica,sans-serif">0.0</span></td>
</tr>
</table>
</div>
</body>
</html>
please note I have trimmed down my sample code as it was too big for stack overflow
How can I make this code split cleanly on the correct page boundaries so that each of the table sections in my html appears as a closed box when I print the PDF out in the browser.
You can set an element a page break property.
Or if you want to page break inside an element you can use the page-break-inside property.
Hope this helps!