Display different HTML header on first page compared to other pages

Question

I'm using a HTML to PDF Library called Nreco to convert HTML Pages to PDF. The task includes setting the same header on every page, apart from the first page which contains the Recipient Address as part of the header.

I'm wondering what is the best way to make it possible. The Nreco C# library allows setting a Document wide header that remains the same depending on every page.

I'm a HTML/CSS amateur. My thinking is: it should be possible somehow (conditional statement) to add the Recipient Address only on the first header, and omit it on every other header instance. However, I can't find a way to access the page counter in the header code, also there is no option to specify a conditional operator inside the HTML/CSS.

Code:

 <td colspan="4" rowspan="11" width="100%" class="textTopLeft">
                        <p>
                            {billingRecipient1}
                            <br>
                            {billingRecipient2}
                            <br>
                            {billingRecipient3}
                            <br>
                            {billingRecipient4}
                        </p>
 </td>

Relevant, but the solution isn't correct because the question was described inaccurately I think. — demoncrate, Jan 08 '18 at 09:50
Did you find a solution to add a different header for the first page? — Ashita Shah, May 28 '18 at 09:45

score 2 · Accepted Answer · answered May 30 '18 at 13:13

2

I found a solution.

I wrapped my block in a div called headerStyle. Then added an ID to my inner block called dynamicSection. After this I added this script to hide the dynamicSection block on any pages apart from the first one.

 var y = document.getElementsByClassName('headerStyle');
 for (var j = 0; j < y.length; j++) {
      if (vars[x[2]] != 1) {                     
          document.getElementById('dynamicSection').style.cssText = 'display: none;';
      }
 }

Hope this helps someone out!

answered May 30 '18 at 13:13

demoncrate

390
2
14

Thank you. I want to set the header from the second page dynamically (values from the database). How can I achieve that? Possible to share the code for that? @Democrats – Ashita Shah Jun 05 '18 at 11:38
this helped alot, thank you. I added a tweek and used [..].style.visibility = 'visible' in the loop, and changed the condition to if (vars[x[2]] == 1){. and the in-line style for the html markup for the dynamicsection i set visibility: hidden. I did this way because for some reason the Nreco was pushing some of the footer elements off the first page. By using visibility, it acts as a placeholder. – dar25 Mar 10 '22 at 14:28

Display different HTML header on first page compared to other pages

1 Answers1