Creating Alternate Header after first page using Chrome-PDF

Al-TSN

I'm trying to create an alternative header after the first page in my report. My thought was to create both headers and hide the page 1 header after page 1 and unhide the alternate header on page 1. If I can figure out how to just hide the header after page 1, I believe I can figure the second part. Being new at this, I have followed a bunch of examples, however I am now stuck. Here is the child template that contains my Header HTML. I tried to use JS to get the page number element (I saw this being used for phantom-pdf) and based on that value hide the div. I'm sure I'm just doing something silly. Thanks - Al

    <body>
        {{#each $pdf.pages}}
            {{#if 0}}
                <div style="page-break-before: always;"></div>
            {{/if}}
            <main class="main"> 
            <header class="header">
                <div id="page1" style="width: 100%;">
                    <div class="twoLeftBox" id="logo4">
                        <p style="text-align: center;">
                            <strong>
                                <img align="none" src="https://www.pii-protect.com/partner_logos?brand_key={{@ root.PCODE}}">
                            </strong>
                        </p>
                    </div>
                    <div class="twoRightBox">
                        <span id="pageNumber" class="RobotoThin25LB">{{getPageNumber 0}}</span>
                    </div>
                </div>
            </header>
            <footer class="footer">
                <div style="width: 100%;">
                    <div class="threeLeftBox RobotoLight10Grey">{{@ root.clientName}}</div>
                    <div class="threeMiddleBox RobotoLight10Grey">Prepared by: {{@ root.partnerName}}</div>
                    <div class="threeRightBox RobotoLight10Grey">{{@ root.runDate}}</div>
                </div>
            </footer>
          </main>
          <script>
            var elem = document.getElementById('pageNumber');
            if (parseInt(elem.innerHTML) > 1) {
                var page1Header = document.getElementById('page1');
                page1Header.style.display = 'none';
            }
          </script>
        {{/each}}
    </body>
</html>

Al-TSN

When I console.log for the pageNumber element it returns 1 for each page

jan_blaha

Please try this example
https://playground.jsreport.net/w/anon/TlXn1uBb

Al-TSN

Thanks Jan. I was able to get it to work like that with the header display: none on the first page. I was trying to have a different header (basically logo on the left, page number on the right) on the first page and page number on the left, some other text in the middle and logo on the right for subsequent pages. I kind of hacked it by hiding the heading on the first page, and use a fixed header for the first page. Learning as I go..