How to Add header and footer in PDF page using DOMPDF?

I create to using dompdf HTML Based Header/Footer, Full width HTML Based Header/Footer and Image Based Header/Footer pdf files. Many PDFs have a Footer and Header where you required to place the logo of the manage, convert, edit, annotate or create enterprise, addresses, emails etc. In Dompdf this may be a simple tricky due to the margins or the size of the page, so you required to be patient and test continously different sizes and setting what fits in your case. In this article, we’ll show you how to implement a dompdf header and footer on your PDF using HTML or images in Dompdf (dompdf documentation).

1. HTML Based Header/Footer

If you only want to set HTML on your footer and header, it will be enough to include the dompdf header and footer tags in the document with a specific dimensions. The position of both elements required to be fixed, otherwise they will be relative to the data content of your PDF, thing that obviously we don’t want. You required to provide the dimensions of the pdf page as well according to your requireds. The bellowing example php create pdf or generates a PDF of 2 pages with margins of the described height:

<html>
    <head>
        <style>
            /** Define the margins of your pdf page **/
            @page {
                margin: 100px 25px;
            }

            header {
                position: fixed;
                top: -60px;
                left: 0px;
                right: 0px;
                height: 50px;

                /** Extra personal styles **/
                background-color: #0b395b;
                color: white;
                text-align: center;
                line-height: 35px;
            }

            footer {
                position: fixed; 
                bottom: -60px; 
                left: 0px; 
                right: 0px;
                height: 50px; 

                /** Extra personal styles **/
                background-color: #0b395b;
                color: white;
                text-align: center;
                line-height: 35px;
            }
        </style>
    </head>
    <body>
        <!-- Define dompdf header and footer blocks before your subject matter content -->
        <header>
            Our Code World
        </header>

        <footer>
            All Rights Reserved. Copyright © <?php echo date("Y");?> 
        </footer>

        <!-- Wrap the subject matter content of your PDF inside a main tag -->
        <main>
            <p style="page-break-after: always;">
                Data Content Page 1
            </p>
            <p style="page-break-after: never;">
                subject matter data Page 2
            </p>
        </main>
    </body>
</html>

dompdf in php

2. Full width HTML Based Header/Footer

With the last methods, you have a few issues. The header and the footer fit inside the margins of the pdf page, which sometimes isn’t exactly what you required. In case that you required that the footer and header have the same width of the paper sheet, you required to proceed different. If this is the case, you may do the bellowing: set the margins of the pdf page to 0, this will automatically make that all the data content of the PDF fits in the entire sheet, making that the footer and header have the 100% width. But you have another issues now as well as that is the margins of the real data content of your PDF. This can be set with margins on the body, note that the margins (at least the top and bottom) required to be greater than the height of the footer and header or you won’t see part of your data content. As last, apply your own styles to the elements as shown in the bellowing example:

<html>
    <head>
        <style>
            /** 
                Set the margins of the pdf page to 0, so the footer and the header
                can be of the full height and width !
             **/
            @page {
                margin: 0cm 0cm;
            }

            /** Define now the real margins of every pdf page in the PDF **/
            body {
                margin-top: 2cm;
                margin-left: 2cm;
                margin-right: 2cm;
                margin-bottom: 2cm;
            }

            /** Define the header rules **/
            header {
                position: fixed;
                top: 0cm;
                left: 0cm;
                right: 0cm;
                height: 2cm;

                /** Extra personal styles **/
                background-color: #0b395b;
                color: white;
                text-align: center;
                line-height: 1.5cm;
            }

            /** Define the footer rules **/
            footer {
                position: fixed; 
                bottom: 0cm; 
                left: 0cm; 
                right: 0cm;
                height: 2cm;

                /** Extra personal styles **/
                background-color: #0b395b;
                color: white;
                text-align: center;
                line-height: 1.5cm;
            }
        </style>
    </head>
    <body>
        <!-- Define header and footer blocks before your subject matter content -->
        <header>
            Our Code World
        </header>

        <footer>
            All Rights Reserved. Copyright © <?php echo date("Y");?> 
        </footer>

        <!-- Wrap the subject matter content of your PDF inside a main tag -->
        <main>
            <h2>Welcome To 4cgandhi</h2>
        </main>
    </body>
</html>

3. Image Based Header/Footer

If you want to add an image as footer and header, you will required to bellow the same structure of the Full Width Html Based dompdf Header and Footer. However the data content of the footer and header would be now an img tag with the corresponding image (with full height and width).

<html>
    <head>
        <style>
            /** 
                Set the margins of the pdf page to 0, so the footer and the header
                can be of the full height and width !
             **/
            @page {
                margin: 0cm 0cm;
            }

            /** Define now the real margins of every pdf page in the PDF **/
            body {
                margin-top: 3cm;
                margin-left: 2cm;
                margin-right: 2cm;
                margin-bottom: 2cm;
            }

            /** Define the header rules **/
            header {
                position: fixed;
                top: 0cm;
                left: 0cm;
                right: 0cm;
                height: 3cm;
            }

            /** Define the footer rules **/
            footer {
                position: fixed; 
                bottom: 0cm; 
                left: 0cm; 
                right: 0cm;
                height: 2cm;
            }
        </style>
    </head>
    <body>
        <!-- Define header and footer blocks before your subject matter content -->
        <header>
            <img src="header.png" width="100%" height="100%"/>
        </header>

        <footer>
            <img src="footer.png" width="100%" height="100%"/>
        </footer>

        <!-- Wrap the subject matter content of your PDF inside a main tag -->
        <main>
            <h2>Welcome To Pakainfo</h2>
        </main>
    </body>
</html>

The last add header & footer (using html) for every page in pdf markup would create in Dompdf something like:

Note

To get a perfect PDF with dompdf Header and Footer based on an image, you may required to experiment, update heights in CSS and even resize the image until everything passes as expected.

I hope you get an idea about dompdf header and footer using PHP.
I would like to have feedback on my infinityknow.comblog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Laravel Encryption Decryption using Crypt class
  2.   Multiple Checkbox Check Uncheck All using jQuery
  3.   javascript Text Avatar Plugin Like Gmail
  4.   jQuery Text Avatars Using CSS Like Gmail
  5.   Set Cookies Get Cookies Delete Cookies with PHP
  6.   Creating Dynamic Email Template in PHP
  7.   PHP LinkedIn Authentication AccessToken - LinkedIn OAuth 2.0
  8.   MySQL Remove special characters from database
  9.   laravel whereraw not working
  10.   Load More Data from Database using vue.js Ajax PHP