【发布时间】：2015-01-30 00:12:50
【问题描述】：
我有一个任务，我需要实现一个发票系统，该系统会生成发票的 HTML 网页，然后将其打印为 PDF 文件。
我输出的发票如下图所示。
我现在需要做的是更改我的代码，以便它在页面边界处产生分页符以匹配我的 PDF 输出的页面大小。目前它不这样做，而是在打印的页面上继续打印扩展图像。
这是我目前使用的 HTML 代码：
<!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>
请注意我已经精简了我的示例代码，因为它对于堆栈溢出来说太大了
如何使这段代码在正确的页面边界上清晰地拆分，以便当我在浏览器中打印 PDF 时，我的 html 中的每个表格部分都显示为一个封闭的框。
【问题讨论】：
-
然后更新你q，已经解决了吗？
标签： html css pdf document invoice