分页 HTML CSS - 以 PDF 格式打印发票

Posted

技术标签:

【中文标题】分页 HTML CSS - 以 PDF 格式打印发票【英文标题】：Page break HTML CSS - print for invoice in PDF 【发布时间】：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，已经解决了吗？ 【参考方案1】：

您可以为元素设置分页符属性。 

page-break-after: auto|always|avoid|left|right|initial|inherit;

或者，如果您想在元素内分页，您可以使用 page-break-inside 属性。

page-break-inside: auto|avoid|initial|inherit;

希望这会有所帮助！

【讨论】：

我已经知道了。但是我在发布的代码中需要帮助。你能帮我吗，拜托 我刚刚编辑了您的帖子，因为您粘贴的 HTML 对于 SO 帖子来说太大了，因此，尝试正确格式化它并没有发生。我建议您将完整代码托管在诸如 paste bin 之类的服务上，然后如果您需要人们查看绝对完整的 html 代码，请提供一个链接：-) 也许使用更好的解决方案？从这里获取一些灵感，您可以上传 XML、设计“发票”并让它处理页面中断等。 cloudformatter.com/Nimbuscloudformatter.com/Nimbus.Editor?http://cdn.xportability.com/… XML 不是我的选择。我想使用 HTML。我应该如何更改发布的 HTML 代码来解决表格的这个问题？

以上是关于分页 HTML CSS - 以 PDF 格式打印发票的主要内容，如果未能解决你的问题，请参考以下文章

WORD 文件分页转PDF 不分页，如何处理

如何通过html创建可以以pdf格式下载/打印的文档页面[重复]

web打印自动分页

HTML/CSS - 分页符上的表头（Webkit） Laravel PDF

如何将网页打印为不分页的pdf

java html转pdf 页面内容太大怎么分页