Adding Headers & Footers from Components in PDF Templates

Consider this use case:

PDF A is the main template with no header and outputs 1 page. PDF B and PDF C are included (called) within PDF A and each defines its own header/footer and can output multiple pages.

Example final page order:

• page 1 - PDF A (no header)
• page 2 - PDF B (Header B)
• page 3 - PDF B (Header B)
• page 4 - PDF C (Header C)
• page 5 - PDF C (Header C)
• page 6 - PDF C (Header C)

To accomplish this, specific CSS and formatting rules must be followed.

Main template (PDF A)

PDF A

{{{{!PDF A}}}}
<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>
{{{{!PDF B}}}}

<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>
{{{{!PDF B}}}}

<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>
{{{{!PDF C}}}}

<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>
{{{{!PDF C}}}}

<div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>
{{{{!PDF C}}}}

Template B

PDF B

<style type="text/css">#page-header-PDFB {
    display: block;
    position: running(header);
}
#page-footer-PDFB {
    display: block;
    position: running(footer);
}
</style>
<div id="page-header-PDFB">PDF B - Header</div>
PDF B - Body

<div id="page-footer-PDFB">PDF B - Footer</div>

Template C

PDF C

<style type="text/css">#page-header-PDFC {
    display: block;
    position: running(header);
}
#page-footer-PDFC {
    display: block;
    position: running(footer);
}
</style>
<div id="page-header-PDFC">PDF C - Header</div>
PDF C - Body

<div id="page-footer-PDFC">PDF C - Footer</div>