Login/Register
Office HTML Word header
Asked Answered
htmlheaderms-wordms-officefooter
L

3

6

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.

Larson answered 18/2, 2012 at 10:51 Comment(0)
A
9

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>&nbsp;HEADER-TITLE</p></p>
    </div>

    </td>
    <td>
    <div style='mso-element:footer' id=f1>

        <p>&nbsp;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'>&nbsp;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'>&nbsp;FIRST-FOOTER-TITLE<o:p></o:p></span></p>

    </div>

    </td></tr>
    </table>


</body></html>
Alcuin answered 5/9, 2012 at 9:24 Comment(4)
It always displays an extra space for me. – Married
Not able to generate the image in header from server but on localhost its working fine. Path being generated for image is fine on server also. Can you please tell me what I am missing that on localhost image is being added into word file but on server its not. Note On local machine I have ms-office installed but on server not. – Complexion
How to remove an empty space on header section? When I view it in the word everything is okay but when printed then empty space is added...any ideas? – Mis
To remove the extra space you can eliminate <o:p></o:p> from header and footer tags – Janessajanet
B
7

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.

Body answered 24/12, 2015 at 13:3 Comment(6)
Very usefull, thanks! Do you know if there is any property which could allow the body text to overlap on the header section ? As it is now the body text always go just below the last line of the header. – Strawser
Take a look here sebsauvage.net/wiki/doku.php?id=word_document_generation. We have ended up using the mhtml model (at the very bottom) and it works perfectly. The problem with this current method is the hidden table that in our case was creating an extra page when last page was more than half way down. – Body
yes that's exactly the tutorial I have successfully used. But I don't manage to have text overlap the header. Another option would be to use watermark instead of header, but that would imply converting the header html into a picture and that's not easy either :/ So if you had a trick to make the body text start at the top of the page, even if there's a header, that would be great :) – Strawser
Any solutions to remove the hidden table in the end of the page/ to remove the extra blank page? – Entremets
as per above sebsauvage.net/wiki/lib/exe/… comment - the only work around was a total change to mhtml – Body
can anyone answer this #56801074 I followed this as example. but the footer is not added instead it just shows page of in the last page. – Empson
S
0

You can hide extra space following this answer

Limiting table's height:

<table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0' style='margin-left:50in;'>
    <tr style='height:1pt;mso-height-rule:exactly'>
            <td>
                <div style='mso-element:header' id="h1" dir="ltr" >
                    <p class="MsoHeader">
                        <table border="0" width="100%" style="margin-bottom: 15pt;">
                            <tr>
                                <td width="50%">
                                Some text goes here
                                </td>
                                <td width="50%" style="text-align: left">
                                    <img height="auto" src="">
                                </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" dir="ltr">
                                <g:message code="offer.letter.page.label"/> <span style='mso-field-code: PAGE '></span> / <span style='mso-field-code: NUMPAGES '></span>
                            </td>
                        </tr>
                    </table>
                </p>
            </div>
        </td>
    </tr>
    </table>
Sollie answered 12/4, 2020 at 10:17 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.