I am currently working on exporting word document from HTML. The document contains header & footer but I want them from page 2. I tried the various approaches from various threads, stackoverflow posts but I am unable to achieve the desired outcome. My code looks like below:
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta charset="utf-8" />
<!--[if gte mso 9]>
<xml>
<w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom><w:DoNotOptimizeForBrowser /></w:WordDocument>
</xml>
<![endif]-->
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
@page WordSection1 {
size: 8.5in 11in;
mso-header-space: 0.5in;
mso-footer-space: 0in;
mso-paper-source: 0;
mso-title-page: yes;
mso-first-header: fh1;
mso-first-footer: ff1;
mso-header: h1;
mso-footer: f1;
}
div.WordSection1 {
page: WordSection1;
}
</style>
</head>
<body>
<div class="WordSection1">
<table style="margin-left: 150in;">
<tr style="height: 1pt; mso-height-rule: exactly;">
<td>
<div style="mso-element: header;" id="h1">
<p class="header" style="text-align: right;">
<img height="36" width="36" src="data:image/jpg;base64,{{headerBase64Image}}" alt="" />
</p>
</div>
</td>
<td>
<div style="mso-element: footer;" id="f1">
<p style="font-family: ff2; font-size: 9px; color: rgb(166, 166, 166); width: 100%; text-align: center; margin: 0in 0in 0pt;">
Page
<span style="mso-field-code: PAGE;"></span>
</p>
</div>
<div style="mso-element: header;" id="fh1">
<p class="MsoHeader">
<span lang="EN-US" style="mso-ansi-language: EN-US;"> FIRST-HEADER-TITLE<o:p></o:p></span>
</p>
</div>
<div style="mso-element: footer;" id="ff1">
<p class="MsoFooter">
<span lang="EN-US" style="mso-ansi-language: EN-US;"> FIRST-FOOTER-TITLE<o:p></o:p></span>
</p>
</div>
</td>
</tr>
</table>
<!-- Other Page Content -->
<div style="page-break-before: always;">
<p class="">
Another page content
</p>
</div>
</div>
</body>
</html>I have set mso-first-header, mso-first-footer, mso-title-page: yes but still does not work. Shows up header, footer in the first page as well.
I looked upon other posts, a number of people have mentioned that setting mso-first-header, mso-first-footer & mso-title-page attributes should do the job.
Apply "Different First Page" MS Word Option for Header and Footer To Dynamically Generated Word Doc Using Office HTML Word header css print mode: display header and footer only on first page of a generated word doc How to make the footer appear only from the second page onwards
I tried all these approaches. Am I missing something?
If I understand your requirements right, you want a cover page (aka title page) without header/footer, followed by the default Word body having separate header/footer for first page and default header/footer for the rest of the pages.
If so, then the cover page needs to be in it's own section. This cover page section may have own page settings and own header/footer settings if needed.
Example which should generate the wanted:
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta charset="utf-8" />
<!--[if gte mso 9]>
<xml>
<w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom><w:DoNotOptimizeForBrowser /></w:WordDocument>
</xml>
<![endif]-->
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
@page CoverPageSection {
size: 8.5in 11in;
mso-header-space: 0.5in;
mso-footer-space: 0in;
mso-paper-source: 0;
}
div.CoverPageSection {
page: CoverPageSection;
}
@page WordSection1 {
size: 8.5in 11in;
mso-header-space: 0.5in;
mso-footer-space: 0in;
mso-paper-source: 0;
mso-title-page: yes;
mso-first-header: fh1;
mso-first-footer: ff1;
mso-header: h1;
mso-footer: f1;
mso-page-numbers:1; /* start with page number 1, so cover page is page number 0 */
}
div.WordSection1 {
page: WordSection1;
}
</style>
</head>
<body>
<!-- cover page content -->
<div class="CoverPageSection">
<!-- no header/footer definitions in hidden table-->
<table style="margin-left: 150in;">
<tr style="height: 1pt; mso-height-rule: exactly;">
<td>
<!-- possible header/footer definitions-->
</td>
</tr>
</table>
<!-- page content -->
<div>
<p class="">
Title aka Cover page content
</p>
<!-- page and section break -->
<br clear="all" style="page-break-before: always; mso-break-type:section-break">
</div>
</div>
<!-- default word section content -->
<div class="WordSection1">
<!-- header/footer definitions in hidden table-->
<table style="margin-left: 150in;">
<tr style="height: 1pt; mso-height-rule: exactly;">
<td>
<div style="mso-element: header;" id="h1">
<p class="header" style="text-align: right;">
<img height="36" width="36" src="data:image/jpg;base64,{{headerBase64Image}}" alt="" />
</p>
</div>
<div style="mso-element: footer;" id="f1">
<p style="font-family: ff2; font-size: 9px; color: rgb(166, 166, 166); width: 100%; text-align: center; margin: 0in 0in 0pt;">
Page
<span style="mso-field-code: PAGE;"></span>
</p>
</div>
<div style="mso-element: header;" id="fh1">
<p class="MsoHeader">
<span lang="EN-US" style="mso-ansi-language: EN-US;"> FIRST-HEADER-TITLE<o:p></o:p></span>
</p>
</div>
<div style="mso-element: footer;" id="ff1">
<p class="MsoFooter">
<span lang="EN-US" style="mso-ansi-language: EN-US;"> FIRST-FOOTER-TITLE<o:p></o:p></span>
</p>
</div>
</td>
</tr>
</table>
<!-- first page content -->
<div>
<p class="">
First page content
</p>
</div>
<!-- other page content -->
<div style="page-break-before: always;">
<p class="">
Another page content
</p>
</div>
<div style="page-break-before: always;">
<p class="">
Another page content
</p>
</div>
</div>
</body>
</html>