<![CDATA[[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 -->

    <body>
        {{#each $pdf.pages}}
          {{#if @index}}
            <div style="page-break-before: always;"></div>
          {{/if}}
          <main class="main">
            <header class="header">
              {{{@root.template.header}}}
            </header>

            <footer class="footer">
              {{{@root.template.footer}}}
            </footer>
          </main>
        {{/each}}
    </body>

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

<!-- main-template -->

<script>
    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 = {
            ...prevOptions,
            marginTop: `${header.offsetHeight + 15}px`,
            marginBottom: `${footer.offsetHeight + 15}px`,
        };
    }
</script>

also, these are my HTML and CSS

<!-- main-template -->

    <div id="main-header" class="fixed hidden">
        {{{template.header}}}
    </div>
        
    <div id="main-footer" class="fixed hidden">
         {{{template.footer}}}
    </div>

// main-template.css

.hidden {
    visibility: hidden;
}

.fixed {
    position: fixed;
}

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

// data

{
    "template":{
        "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>"
    }
}

Explanation

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.

Result

The result is something like this:

0_1692359553196_upload-80b36750-c954-434f-a0f3-11933d8cb82e

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

]]>https://forum.jsreport.net/topic/2899/solution-custom-pdf-margin-with-unknown-header-footer-heightsRSS for NodeMon, 17 Aug 2026 04:43:30 GMTFri, 18 Aug 2023 12:00:46 GMT60<![CDATA[Reply to [Solution] Custom PDF margin with unknown header/footer heights on Fri, 18 Aug 2023 14:24:47 GMT]]>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 -->

    <body>
        {{#each $pdf.pages}}
          {{#if @index}}
            <div style="page-break-before: always;"></div>
          {{/if}}
          <main class="main">
            <header class="header">
              {{{@root.template.header}}}
            </header>

            <footer class="footer">
              {{{@root.template.footer}}}
            </footer>
          </main>
        {{/each}}
    </body>

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

<!-- main-template -->

<script>
    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 = {
            ...prevOptions,
            marginTop: `${header.offsetHeight + 15}px`,
            marginBottom: `${footer.offsetHeight + 15}px`,
        };
    }
</script>

also, these are my HTML and CSS

<!-- main-template -->

    <div id="main-header" class="fixed hidden">
        {{{template.header}}}
    </div>
        
    <div id="main-footer" class="fixed hidden">
         {{{template.footer}}}
    </div>

// main-template.css

.hidden {
    visibility: hidden;
}

.fixed {
    position: fixed;
}

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

// data

{
    "template":{
        "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>"
    }
}

Explanation

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.

Result

The result is something like this:

0_1692359553196_upload-80b36750-c954-434f-a0f3-11933d8cb82e

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

]]>https://forum.jsreport.net/post/12539https://forum.jsreport.net/post/12539Fri, 18 Aug 2023 14:24:47 GMT