[Solution] Custom PDF margin with unknown header/footer heights

  • Re: PDF margin match dynamic header/footer height

    Yesterday I opened this topic above and now I've found the solution for that.

    Basically, I added the header-footer from pdf-utils then I set my custom header and footer inside of each

    <!-- header-footer -->
            {{#each $pdf.pages}}
              {{#if 0}}
                <div style="page-break-before: always;"></div>
              <main class="main">
                <header class="header">
                <footer class="footer">

    and on my default template I made this on script tag.

    <!-- main-template -->
        const header = document.getElementById('main-header');
        const footer = document.getElementById('main-footer');
        if (header && footer) {
            const prevOptions = window.JSREPORT_CHROME_PDF_OPTIONS || {};
            window.JSREPORT_CHROME_PDF_OPTIONS = {
                marginTop: `${header.offsetHeight + 15}px`,
                marginBottom: `${footer.offsetHeight + 15}px`,

    also, these are my HTML and CSS

    <!-- main-template -->
        <div id="main-header" class="fixed hidden">
        <div id="main-footer" class="fixed hidden">
    // main-template.css
    .hidden {
        visibility: hidden;
    .fixed {
        position: fixed;

    The template.header and template.footer I expect to receive as data:

    // data
            "header":"<div style='width: 100%; height: 250px; background: green; text-align: center'>HEADER LEGAL</div>",
            "footer":"<div style='width: 100%; height: 30px; background: red; text-align: center'>FOOTER BACANA {pageNumber}/{pageTotal}</div>"


    The window.JSREPORT_CHROME_PDF_OPTIONS works in a dynamic way so if I change it, it will affect my PDF config and update it visually on the generated document.

    The main-header and main-footer are invisible and fixed, so they are on " DOM " and then I'm able to get their heights on script tag and set them as marginTop and marginBottom of my PDF.

    The reason it HAS to be on script is because you don't have access to either window or document on script files.


    The result is something like this:


    If anyone needs an example, I will create one and send as a reply here.

Log in to reply

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.