Home » Php » php – Mpdf different header for first page

php – Mpdf different header for first page

Posted by: admin July 12, 2020 Leave a comment


I am working on quotation software where I am using mpdf for quotation generation using HTML format. Header are set by code below.


Which applies uniformly to all pages. But I need different header to first page. How should I achieve it?

How to&Answers:

As you wrote, SetHTMLHeader and SetHTMLFooter apply to the entire document. If you want different headers / footers for the first page you will have to remove both


And do it like so:

  1. In your PDF’s HTML code, place right after the <body> tag the different header definitions like so:
<htmlpageheader name="firstpage" style="display:none">
    <div style="text-align:center">First Page</div>

<htmlpageheader name="otherpages" style="display:none">
    <div style="text-align:center">{PAGENO}</div>
  1. Set your headers like this (still in you first page’s code)
<sethtmlpageheader name="firstpage" value="on" show-this-page="1" />
<sethtmlpageheader name="otherpages" value="on" />

This turns on both headers but on the first page shows the “firstpage” header.

  1. Same goes for footers.


There are actually a few ways to go about it. They are all documented here. I chose to write here the one I think is the most straight forward and will easily work, but I recommend you read the docs and choose the one that best suits your needs.


As Yotam said, there’s other ways to acomplish this. If you are using CSS to style your page, as usual, you may find the @page selector useful. It should be something like this:

@page {
    header: html_otherpages;

@page :first {
    header: html_firstpage;

Hope this helps.



place right after the <body>

<htmlpageheader name="firstpageheader" style="display:none">
    <div style="text-align:center"> first page header</div>

<htmlpagefooter name="firstpagefooter" style="display:none">
    <div style="text-align:center">first page footer</div>

<htmlpageheader name="otherpageheader" style="display:none">
    <div style="text-align:center"> all page Header</div>

<htmlpagefooter name="otherpagesfooter" style="display:none">
    <div style="text-align:center">all page footer </div>

In CSS use following :

@page {  
    header: html_otherpageheader;
    footer: html_otherpagesfooter;

@page :first {    
    header: html_firstpageheader;
    footer: html_firstpagefooter;