How to skip Header/Footer from first page or make it cover page?
Opened this issue · 3 comments
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.
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.
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>
</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>©</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>
</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.
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.