I am generating "Word document" with a header on the first page as HTML code. <style>
tag contains:
@page Section {
size:8.5in 11.0in;
margin: 0.7in 0.9in 0.7in 0.9in;
mso-header-margin: 0.0in;
mso-footer-margin: 0.0in;
mso-title-page: yes;
mso-first-header: fh1;
mso-paper-source: 0;
}
div.Section {
page: Section;
}
and <body>:
<div class="Section" style="font-family: Verdana, sans-serif;">
<![if supportFields]>
<div style="mso-element:header" id="fh1">
<p class="MsoHeader">
header
</p>
</div>
<![endif]>
</div>
It shows the "header" text both in header and in the document's main body. The resources (http://techsynapse.blogspot.com/2007/03/generating-word-document-dynamically.html and http://www.pbdr.com/ostips/wordfoot.htm) I have found say that there is no way of avoiding this effect without using an additional header file which is not an option for me.
And there goes my question: do you know any work-around for that problem? How can I hide the occurence of the header in main document but leave it in its place at the top of the page? Thanks in advance for any piece of advice.
This worked for me:
<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><title></title>
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>90</w:Zoom>
</w:WordDocument>
</xml><![endif]-->
<style>
p.MsoFooter, li.MsoFooter, div.MsoFooter
{
margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
font-size:12.0pt;
}
<style>
<!-- /* Style Definitions */
@page Section1
{
size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-title-page:yes;
mso-header: h1;
mso-footer: f1;
mso-first-header: fh1;
mso-first-footer: ff1;
mso-paper-source:0;
}
div.Section1
{
page:Section1;
}
table#hrdftrtbl
{
margin:0in 0in 0in 900in;
width:1px;
height:1px;
overflow:hidden;
}
-->
</style></head>
<body lang=EN-US style='tab-interval:.5in'>
<div class=Section1>
<p> CONTENT </p>
<br/>
<table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
<tr><td>
<div style='mso-element:header' id=h1 >
<p class=MsoHeader ><p> HEADER-TITLE</p></p>
</div>
</td>
<td>
<div style='mso-element:footer' id=f1>
<p> FOOTER-TITLE</p>
<p class=MsoFooter>
<span style=mso-tab-count:2'></span>
Page <span style='mso-field-code: PAGE '><span style='mso-no-proof:yes'></span></span> of <span style='mso-field-code: NUMPAGES '></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>
</body></html>
To update on above answer by vencedor and remove the extra empty character encoding added to your header/footer images/text you can do something like this:
<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 http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<!--[if gte mso 9]><xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>100</w:Zoom>
</w:WordDocument>
</xml><![endif]-->
<style>
<!-- /* Style Definitions */
p.MsoHeader, li.MsoHeader, div.MsoHeader{
margin:0in;
margin-top:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
}
p.MsoFooter, li.MsoFooter, div.MsoFooter{
margin:0in 0in 1in 0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
}
.footer {
font-size: 9pt;
}
@page Section1{
size:8.5in 11.0in;
margin:0.5in 0.5in 0.5in 0.5in;
mso-header-margin:0.5in;
mso-header:h1;
mso-footer:f1;
mso-footer-margin:0.5in;
mso-paper-source:0;
}
div.Section1{
page:Section1;
}
table#hrdftrtbl{
margin:0in 0in 0in 9in;
}
-->
</style>
<style type="text/css" media="screen,print">
body {
font-family: "Calibri", "Verdana","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size:12pt;
}
pageBreak {
clear:all;
page-break-before:always;
mso-special-character:line-break;
}
</style>
</head>
<body style='tab-interval:.5in'>
<div class="Section1">
Something page 1
<div class="pageBreak"></div>
Something page 2
<div class="pageBreak"></div>
<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0'>
<tr>
<td>
<div style='mso-element:header' id="h1" >
<p class="MsoHeader">
<table border="0" width="100%">
<tr>
<td>
YOUR_HEADER IMAGE/TEXT
</td>
</tr>
</table>
</p>
</div>
</td>
<td>
<div style='mso-element:footer' id="f1">
<p class="MsoFooter">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" class="footer">
YOUR_FOOTER_TEXT
<g:message code="offer.letter.page.label"/> <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span>
</td>
</tr>
</table>
</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
This now includes full css components for header and footer segments.
The trick that actually removes the extra encoding is declaring yet another table within the MsoFooter and MsoHeader sections.
来源：https://stackoverflow.com/questions/9340527/office-html-word-header