jsreport forum

ed-ateixeira

ed-ateixeira

@bjrmatos well, it seems that the problem is when I make the template request. I'll see if there's a problem on the backend. thanks

ed-ateixeira

I have a JSON with more than 16,000 lines and when I make a request I get a PDF with only blank pages. I'm afraid that jsreport doesn't support a file this large. Does anyone have any idea what may be happening?

ed-ateixeira

Solution: Custom PDF margin with unknown header/footer heights

ed-ateixeira

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 4}}
            <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.

ed-ateixeira

I receive a header and a footer as a string something like "<div style='height: 300px'></div>".

This causes me to not be sure of the header/footer height so I can set the PDF margin for that because the header/footer will overlap the content if the margin is not set.

The problem is that I don't have access to document or window on beforeRender, so I'm not able to generate an Element with that string and get its proper height to set as the PDF margin.

I've tried lots of ways to overcome this problem, but couldn't find any. Does anyone has any idea of how I can make this possible?

Posts made by ed-ateixeira

Explanation

Result