分頁符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

回答

相關問題