Header e footer fissi in Dompdf

Mattepuffo's logo
Header e footer fissi in Dompdf

Header e footer fissi in Dompdf

Dompdf la conosciamo, è una libreria per PHP che ci consente di creare un PDF partendo da codice HTML.

Ovviamente è possibile usare CSS per impostare le regole di visualizzazione.

Oggi vediamo un esempio per visualizzare un header ed un footer fissi, in modo che si vedano su tutte le pagine.

In sostanza è come se usassimo intestazione e piè di pagina.

Questo un esempio di contenuto:

<html>
    <head>
        <style>
            @page {
                margin: 0cm 0cm;
            }

            body {
                margin-top: 2cm;
                margin-left: 2cm;
                margin-right: 2cm;
                margin-bottom: 2cm;
            }

            header {
                position: fixed;
                top: 0cm;
                left: 0cm;
                right: 0cm;
                height: 2cm;
                background-color: yellow;
                text-align: center;
                line-height: 1.5cm;
            }

            footer {
                position: fixed; 
                bottom: 0cm; 
                left: 0cm; 
                right: 0cm;
                height: 2cm;
                background-color: red;
                text-align: center;
                line-height: 1.5cm;
            }
        </style>
    </head>
    <body>
        
        <header>
            CONTENUTO HEADER
        </header>

        <footer>
            CONTENUTO FOOTER
        </footer>

        <main>
            <p style="page-break-after: always;">
                PAGINA 1
            </p>
            <p style="page-break-after: never;">
                PAGINA 2
            </p>
        </main>
    </body>
</html>

Come vedete è tutto HTML e CSS.

Nel PDF dovreste vedere due pagine, cone header e footer in entrambe.

Ovviamente potete mettere anche immagini, dipende da quello che vi serve.

Ultima nota, ho dato per scontato che abbiate già installato la libreria e che sappiate usarla.

Qui vi ho messo solo il codice header/footer fissi.

Enjoy!


Share this Post

Commentami!