4
Views
1
Comments
[Ultimate PDF] Header and footer not repeating on each page in Ultimate PDF component
ultimate-pdf
Reactive icon
Forge asset by Leonardo Fernandes
Application Type
Reactive
Service Studio Version
11.55.60 (Build 64657)

Hi,

I am facing an issue related to header and footer while previewing & printing a pdf (Ctrl+P) generated by ultimate PDF.

The header appears only on the first page of the pdf and continuing from the 2nd page the header is no longer visible. Vice versa case for the footer that its visible only on the last page.

Also tried to use the repeat heading block in order to achieve header on each page but got the same results. 

Along with this there is one default URL printed on each page end which is similar to as of the browser link on which we are viewing the pdf. How can we remove this URL?

Can someone please help me to sort this issue?



image (2).png
image (3).png
2021-05-10 15-08-33
Mulayam yadav

Hi @Rishabh Chawda ,

As per your query regarding printing the PDF, if you want the header and footer to be fixed and repeated on every page during print (Ctrl + P), you can achieve this by applying position: fixed to the header and footer within print-specific CSS (@media print). This ensures that they appear consistently on each printed page.

Once this is implemented, the header and footer will render correctly across all pages in the printed PDF.


Css:


 @media print {      @page {        size: A4 portrait;        margin: 10mm;      }      body {        -webkit-print-color-adjust: exact !important;        print-color-adjust: exact !important;      }      .print-header {        display: flex;        align-items: center;        justify-content: space-between;        position: fixed;        top: 0;        left: 0;        right: 0;        height: 70px;        padding: 0 20px;        border-bottom: 2px solid #000;        background: #f7f7f7;        z-index: 9999;      }      .print-header img {        height: 40px;      }      .print-footer {        display: block;        position: fixed;        bottom: 0;        left: 0;        right: 0;        height: 40px;        text-align: center;        line-height: 40px;        font-size: 11px;        border-top: 2px solid #000;        background: #f7f7f7;        z-index: 9999;      }      .invoice-body {        margin-top: 90px;     /* reserve header space */        margin-bottom: 60px;  /* reserve footer space */        padding: 20px;      }      thead {        display: table-header-group;      }      tr {        page-break-inside: avoid;      }    }

print-html.html
Screenshot 2026-02-26 170832.png
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.