HOW TO add a header or footer to a dynamically generated Word document

There was a question recently on my CodeProject article "Dynamically generate a MS Word document using HTML & CSS". The article describes how to generate a Word document programmatically without using any components, by exploiting the formatting features exposed through Office XML and CSS. The questioner wanted to know how to add a custom header and footer and show something like Page X of Y (total pages).

Based on what I have tried so far, showing a header and footer using Office XML in MS Word is not as easy as it is in Excel. If you want to keep the code simple & don't need any great fireworks i.e. you will just settle for page numbers in the header or footer then it's a matter of adding a few lines to the original source code. The code can be viewed at this Github Gist

Update (1-Sep-2010): To add a custom header & footer, check this new post

To add a footer that shows Page number at the bottom right, here are the steps -

1) Add these classes inside the style tags-

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;}

Tweak the MsoFooter class that is referenced by the footer, as required.

2) Add following line to @page Section1 definition -

mso-footer: f1;

3) Add this div block before the end body tag -

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

<p class=MsoFooter>
<span style='mso-tab-count:2'></span><span style='mso-field-code:" PAGE "'></span>
</p>
</div>

Setting the value of mso-tab-count attribute to 2 moves it to the rightmost edge. Set mso-tab-count attribute to 1 to center it and drop the span tag & style attribute altogether if you want Page number in the footer on the left.

The process to add a Header that shows Page number at the center is similar to the steps described above.

1) Add these classes inside the style tags-

p.MsoHeader, li.MsoHeader, div.MsoHeader
{margin:0in;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
tab-stops:center 3.0in right 6.0in;
font-size:12.0pt;
font-family:"Times New Roman";}

Tweak the MsoHeader class that is referenced by the footer, as required.

2) Add following line to @page Section1 definition -

mso-header: h1;

3) Add this div block before the end body tag -

<div style='mso-element:header' id=h1>
<p class=MsoHeader><span style='mso-tab-count:1'></span>
<span style='mso-field-code:" PAGE "'></span>
</p>
</div>

Make sure that you also programatically set the document to open in "Print Layout" mode. The Header & Footer will not be visible in the default "Web Layout" view.

To arrive at this solution we have basically replicated the same technique that Word uses to store header and footer data with key inputs from the Office HTML and XML Reference.

"Word does not display header and footer information in an HTML page, but it does store the data.

Header and footer information is stored in a separate file named Header.htm. Inside the file, the header and footer information is stored as fields, using Span elements with the mso-element:field-begin, mso-element:field-separator, and mso-element:field-end attributes in conjunction with the MsoHeader and MsoPageNumber styles."

The attempt here is to encapsulate the settings of external Header.htm link file directly into our main page. As we have to keep things simple, all the available Word Header & Footer tokens are not accomodated.

By encapsulating the features of external Header.htm file directly into our main page to keep the solution simple, we loose the ability to use all the available Word Header & Footer tokens.

Related links:
HOW TO implement "Download as Word/Excel" functionality through a web page
HOW TO send an email with a Word or Excel file attachment built on the fly
HOW TO generate a Word document dynamically with user submitted text formatted with Free Text Box