分页符HTML CSS - 用于打印发票的PDF

-9

我有一个任务，我需要实现一个发票系统，该系统生成发票的HTML网页，然后打印到PDF文件。分页符HTML CSS - 用于打印发票的PDF

我输出的发票显示在下图中。

enter image description here

我现在需要做的是改变我的代码，以便它在页面边界产生分页符，以配合我的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中的每个表格部分都显示为一个封闭的框。

来源

2014-12-01 internet

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

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

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

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

希望这会有所帮助！

来源

2014-12-01 22:18:12

我已经知道了。但是我在发布的代码中需要帮助。你能帮我吗，请 – internet 2014-12-01 22:20:19

我刚刚编辑过你的帖子，因为你粘贴的HTML对于SO帖子太大了，结果，试图正确格式化没有发生。我建议你在一些像粘贴bin这样的服务上托管完整的代码，然后把一个链接，如果你需要人们看到绝对完整的HTML代码在所有它的血淋淋的细节:-) – shawty 2014-12-01 22:36:40

也许使用更好的解决方案？从这里获得一些灵感，您可以在其中上传XML，设计“发票”并让它处理页面中的中断等。 http://www.cloudformatter.com/Nimbus http://www.cloudformatter.com/Nimbus.Editor?http://cdn.xportability.com/Samples/Invoice.html – 2014-12-02 06:39:32

分页符HTML CSS - 用于打印发票的PDF

回答

相关问题