Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to skip Header/Footer from first page or make it cover page? #125

Open
mahendra119 opened this issue Jan 25, 2021 · 5 comments
Open

How to skip Header/Footer from first page or make it cover page? #125

mahendra119 opened this issue Jan 25, 2021 · 5 comments

Comments

@mahendra119
Copy link

Hello,
This is an awesome package but I ran in to issue where I want to skip Header/Footer from the first page but I am not getting any solution for this.
Can you please help? Any help would be appreciated.
@Dogson
Copy link

Dogson commented Apr 27, 2021

Hello,
Could you point me towards how you managed to add a footer / header to your document ? I cannot for the life of me find a way to do it.

Thank you very much.

@mahendra119
Copy link
Author

Hi @Dogson Please check below code for setting Header/Footer, However We were not able to skip Header/Footer from first page.
let content = '' +
`

<style type="text/css">
body {
font-family: 'Nunito';

                  }
                  table {
                      border-collapse: collapse;
                    }

                  table, td, th {
                      border: 1px solid #dddddd;
                      text-align: left;
                      padding: 5px;
                    }
                  @page{
                      margin: 0.5in 0.5in 0.5in 0.5in ;
                  }
                  @pagewrew
                  {
                      mso-page-orientation: portrait;
                      size:29.7cm 21cm;    margin:1cm 1cm 1cm 1cm;
                  }
                  @page Section1 {
                      size:8.5in 11.0in;
                      mso-header: h1;
                      mso-header-margin: 1.27cm ;
                      mso-footer: f1;
                      mso-footer-margin:  1.27cm ;
                  }
                  div.Section1 {page:Section1;}
                  p.MsoHeader { border-bottom: 1px solid black; padding-bottom: 7px;}
                                  p.MsoFooter { border-top: 1px solid black; padding-top: 7px; }

                  </style>
              </head>
              <body>
              <div class=Section1 style="mso-header-margin: 1.27cm ;">
            
              <br>
              <div> <img src="${projectCoverPageImg}"> </div>
              <br clear=all style='mso-special-character:line-break; page-break-before:always'>

              <!-- header/footer:
                  This element will appears in your main document (unless you save in a separate HTML),
                  therefore, we move it off the page (left 50 inches) and relegate its height
                  to 1pt by using a table with 1 exact-height row
              -->
              <table style='margin-left:50in;'><tr style='height:1pt;mso-height-rule:exactly'>
              <td >
                <div style='mso-element:header' id=h1 >
                  <p class=MsoHeader  >
                  <!-- <b align='left'>Data</b><span style='mso-tab-count:7'> </span><img src="${dataUrl}"  />-->
                  <table class='abc' width="100%" border='0'  cellspacing="0" cellpadding="0"  >
                          <tr  >
                              <td width="50%" height="50%" style='border:0;border-bottom: 1px solid black; font-size: 14pt; '>
                             Data
                              </td>

                              <td  width="50%" height="${headerHeightDynamic}" style='border:0;border-bottom: 1px solid black;'>
                                      <div align="right">   <img src="${dataUrl}" width=200 height=50 /> </div>
                              </td>
                          </tr>
                          <tr>
                              <td  style='border:0;' height='10'></td>
                              <td  style='border:0;' height='10'></td>
                          </tr>
                  </table>

                  </p>
                </div>
                &nbsp;
              </td>

              <td>
                <div style='mso-element:footer' id=f1>
                  <p class=MsoFooter  style="margin:0in; text-align: right;font-size:9pt; font-family: 'Nunito';border-top: 1px solid black; padding-top: 15px;">
                  <span>&#169;</span> ${currentYear} ${footerText}
                  <span style='mso-tab-count:4'> </span>Page <span style='mso-field-code:PAGE; '></span>  of <span style='mso-field-code:NUMPAGES'></span>
                </p>
                </div>
                &nbsp;
            </td></tr></table>
              <br clear=all style='mso-special-character:line-break; page-break-before:always'>

              <div ><p style="margin-bottom: 25px;"> Data</p></div>
              </div></body>
              </html>`
          
      This may work for you.

@Dogson
Copy link

Dogson commented Apr 27, 2021

Thank you very much, I'll look into it.

If you're working with back-end, you might be interested to look into this fork : https://www.npmjs.com/package/html-to-docx
It gives options to set footer, header, automatic pagination and to skip the first page for header and footer.
It doesn't work client-side yet but it should come soon.

@alexanderdevm
Copy link

Hi @Dogson Please check below code for setting Header/Footer, However We were not able to skip Header/Footer from first page. let content = '' + ` <style type="text/css"> body { font-family: 'Nunito';

                  }
                  table {
                      border-collapse: collapse;
                    }

                  table, td, th {
                      border: 1px solid #dddddd;
                      text-align: left;
                      padding: 5px;
                    }
                  @page{
                      margin: 0.5in 0.5in 0.5in 0.5in ;
                  }
                  @pagewrew
                  {
                      mso-page-orientation: portrait;
                      size:29.7cm 21cm;    margin:1cm 1cm 1cm 1cm;
                  }
                  @page Section1 {
                      size:8.5in 11.0in;
                      mso-header: h1;
                      mso-header-margin: 1.27cm ;
                      mso-footer: f1;
                      mso-footer-margin:  1.27cm ;
                  }
                  div.Section1 {page:Section1;}
                  p.MsoHeader { border-bottom: 1px solid black; padding-bottom: 7px;}
                                  p.MsoFooter { border-top: 1px solid black; padding-top: 7px; }

                  </style>
              </head>
              <body>
              <div class=Section1 style="mso-header-margin: 1.27cm ;">
            
              <br>
              <div> <img src="${projectCoverPageImg}"> </div>
              <br clear=all style='mso-special-character:line-break; page-break-before:always'>

              <!-- header/footer:
                  This element will appears in your main document (unless you save in a separate HTML),
                  therefore, we move it off the page (left 50 inches) and relegate its height
                  to 1pt by using a table with 1 exact-height row
              -->
              <table style='margin-left:50in;'><tr style='height:1pt;mso-height-rule:exactly'>
              <td >
                <div style='mso-element:header' id=h1 >
                  <p class=MsoHeader  >
                  <!-- <b align='left'>Data</b><span style='mso-tab-count:7'> </span><img src="${dataUrl}"  />-->
                  <table class='abc' width="100%" border='0'  cellspacing="0" cellpadding="0"  >
                          <tr  >
                              <td width="50%" height="50%" style='border:0;border-bottom: 1px solid black; font-size: 14pt; '>
                             Data
                              </td>

                              <td  width="50%" height="${headerHeightDynamic}" style='border:0;border-bottom: 1px solid black;'>
                                      <div align="right">   <img src="${dataUrl}" width=200 height=50 /> </div>
                              </td>
                          </tr>
                          <tr>
                              <td  style='border:0;' height='10'></td>
                              <td  style='border:0;' height='10'></td>
                          </tr>
                  </table>

                  </p>
                </div>
                &nbsp;
              </td>

              <td>
                <div style='mso-element:footer' id=f1>
                  <p class=MsoFooter  style="margin:0in; text-align: right;font-size:9pt; font-family: 'Nunito';border-top: 1px solid black; padding-top: 15px;">
                  <span>&#169;</span> ${currentYear} ${footerText}
                  <span style='mso-tab-count:4'> </span>Page <span style='mso-field-code:PAGE; '></span>  of <span style='mso-field-code:NUMPAGES'></span>
                </p>
                </div>
                &nbsp;
            </td></tr></table>
              <br clear=all style='mso-special-character:line-break; page-break-before:always'>

              <div ><p style="margin-bottom: 25px;"> Data</p></div>
              </div></body>
              </html>`
          
      This may work for you.

This works amazingly, thank you :)

@gongph
Copy link

gongph commented Feb 2, 2025 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Dogson @alexanderdevm @gongph @mahendra119