How to update footer with with dynamic content on each page?

2.8k Views Asked by At

In each page inside our PrinceXML pdf we need the content in the footer to change based on a php dynamic variable.

Is there a way to update the content in the footer for each page?

(Below is the css code and the div)

css:

@page{ 
    size: US-letter portrait;
    margin: 1in .5in;
    @top{
      content: flow(header);
    }
    @bottom{
      content: flow(footer);
    }
    @bottom-right{
      content: '';
    }
  }
  @page rotated{
    size: US-letter landscape;
  }

  .rotated-page{
    page:rotated;
  }
  /*pagebreaks*/
.page-break{
    page-break-before: always;
  }
.page-break-after{
    page-break-after: always;
  }

/* page_header*/
#header{
    width: 100%;
    flow: static(header,start);
}
.logo-line{
    width:90%;
    margin: 0 auto;
    text-align: center;
}
.page-title{
    font-size: 20px;
    font-family: arial;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* page_footer*/
#footer{
  width: 100%;
  padding:0;
  border-top: 3px solid #5D1F22;
  flow: static(footer,start);
}

footer div:

<div id="footer">
    <div class='footer-left'>Revision for <?= $this->manual_nm; ?> in <?= $this->revision_cycle; ?> <br>Submission Document printed on <?= $this->generated_date; ?></div>
    <div class='footer-right'></div>
</div>
1

There are 1 best solutions below

1
On

You can pull text from the page in order to fulfil the headers and footers.

For example, if I wanted the latest h2 tag to appear in the footer, I could extract it from the heading using the following CSS.

h2 {
    string-set: title content();
}

The name title is a name you give - you could call it heading, for example.

You can then use this string in your footer:

@page {
    @bottom-left {
        content: string(title);
    }
}

Example adapted from Using CSS Paged Media to Add Dynamic Headers.