Factures DOMPDF avec plusieurs pages

Je crée des factures en utilisant DOMPDF. Ce dont j'ai besoin, c'est que le contenu de la facture coule sur autant de pages que nécessaire et que le montant total dû soit en bas de la facture.Factures DOMPDF avec plusieurs pages

J'ai d'abord essayé d'avoir un div à hauteur fixe avec un pied de page absolu, mais il est évident que mes détails de facture peuvent s'étendre sur le pied de page. Ce dont j'ai besoin, c'est d'avoir un min-height pour ma div principale et d'ajouter un padding au bas de ce div pour mon footer, mais min-height ne semble pas fonctionner.

J'ai aussi essayé de faire ma page entière dans une table, mais je ne veux pas que mes lignes de la table pour diviser sur plusieurs pages (de manière à maintenir tous mes totaux sur la même page.)

Des solutions?

EDIT

HTML échantillon (positionnement absolu):

<div id="main" style="height:10in;width:7in;position:relative;"> 
    <!-- header is here, all OK --> 
    <!-- content, dynamic height --> 
    <!-- footer --> 
</div>

Exemple HTML (tables):

<table width="100%"> 
    <tr><!-- header --></tr> 
    <tr><!-- content --></tr> 
    <tr><!-- footer --></tr> 
</table>

Le pied de page ne doit jamais être divisé et au fin du document. Si le contenu remplit la page, le pied de page doit se trouver à la fin de la page.

Source

2013-08-08 davewoodhall

Avez-vous de la difficulté à visualiser cela, pouvez-vous poster un exemple de document HTML? – BrianS

J'ai ajouté une aide visuelle qui devrait vous aider à voir l'image générale. – davewoodhall

L'emplacement de la page est-il important? C'est à dire. devrait-il être juste après le contenu, ou pourrait-il être au bas de la page indépendamment de la profondeur du contenu? – BrianS

La solution idéale serait d'utiliser page-break-before: avoid sur le pied de page. Cela ne fournirait qu'un minimum de couverture dans votre scénario (c'est-à-dire qu'une seule ligne de table serait tirée avec), mais au moins le pied de page ne serait pas en solo.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <style> 
    div { width: 100%; margin: .25em; } 
    span { width: 33%; display: inline-block; } 
    div#footer { text-align: right; border-top: 1px solid black; page-break-before: avoid; } 
    </style> 
</head> 
<body> 
    <div><span>Count</span><span>Item</span><span>Item Total</span></div> 
    <div><span>1</span><span>widget</span><span>X.XX</span></div> 
    <div><span>1</span><span>widget</span><span>X.XX</span></div> 
    ... 
    <div><span>1</span><span>widget</span><span>X.XX</span></div> 
    <div><span>1</span><span>widget</span><span>X.XX</span></div> 
    <div id="footer"> 
    <p>Total: X.XX</p> 
    </div> 

</body> 
</html>

Malheureusement, le saut de page ne fonctionne pas correctement sur les tables. Pour fournir un travail dans cette situation, je vais commencer par une hypothèse: le pied de page peut être tout en bas de la page, indépendamment de la profondeur du contenu.

Dans ce cas, vous pouvez essentiellement contourner le problème en raison d'une anomalie dans la façon dont dompdf traite le contenu du document. A savoir, les éléments sont rendus tels qu'ils sont rencontrés. Ainsi, un élément à position fixe est rendu sur les pages commençant par la page sur laquelle il est rencontré. Il n'apparaîtra pas sur les pages précédentes.

Ceci est une anomalie jusqu'à la version 0.6.0 et pourrait changer dans le futur.

Vous pouvez donc placer votre pied de page à la fin du document en utilisant position: fixed ou position: absolute avec une marge de page dans laquelle vous déplacez le pied de page. Quelque chose comme ce qui suit:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <style> 
    @page { margin: 1in; } 
    table { width: 100%; } 
    div#footer { width: 100%; position: absolute; bottom: -.35in; text-align: right; border-top: 1px solid black; } 
    </style> 
</head> 
<body> 
<table> 
    <tr><td>Count</td><td>Item</td><td>Item Total</td></tr> 
    <tr><td>1</td><td>widget</td><td>X.XX</td></tr> 
    <tr><td>1</td><td>widget</td><td>X.XX</td></tr> 
    ... 
    <tr><td>1</td><td>widget</td><td>X.XX</td></tr> 
    <tr><td>1</td><td>widget</td><td>X.XX</td></tr> 
</table> 

<div id="footer"> 
    <p>Total: X.XX</p> 
</div> 

</body> 
</html>

Avec le code ci-dessus le pied de page apparaîtra toujours sur la dernière page en bas de la page.

Source

2013-08-14 02:27:30 BrianS

Factures DOMPDF avec plusieurs pages

Répondre

Questions connexes