HTML generated Microsoft Word document with header, footer and watermark

Question

I'm looking for an example of a Microsoft Word Document generated by HTML. It should contain a header, footer and a watermark.

Georgi Nikolov · Accepted Answer

This is some example, hope it helps others that are trying to generate ms word .doc file with HTML.

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><title></title>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<style>
@page
{
    mso-page-orientation: landscape;
    size:29.7cm 21cm;    margin:1cm 1cm 1cm 1cm;
}
@page Section1 {
    mso-header-margin:.5in;
    mso-footer-margin:.5in;
    mso-header: h1;
    mso-footer: f1;
    }
div.Section1 { page:Section1; }
table#hrdftrtbl
{
    margin:0in 0in 0in 900in;
    width:1px;
    height:1px;
    overflow:hidden;
}
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>
<xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>100</w:Zoom>
<w:DoNotOptimizeForBrowser/>
</w:WordDocument>
</xml>
</head>

<body>
<div class="Section1">

    <p>&nbsp;</p>
<br/>
    <table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
    <tr><td>        <div style='mso-element:header' id=h1 >
        <!-- HEADER-tags -->
            <p class=MsoHeader >HEADER</p>
        <!-- end HEADER-tags -->
        </div>
    </td>
    <td>
    <div style='mso-element:footer' id=f1><span style='position:relative;z-index:-1'> 
        <!-- FOOTER-tags -->
        FOOTER

        <span style='mso-no-proof:yes'><!--[if gte vml 1]><v:shapetype
         id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t"
         path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
         <v:formulas>
          <v:f eqn="if lineDrawn pixelLineWidth 0"/>
          <v:f eqn="sum @0 1 0"/>
          <v:f eqn="sum 0 0 @1"/>
          <v:f eqn="prod @2 1 2"/>
          <v:f eqn="prod @3 21600 pixelWidth"/>
          <v:f eqn="prod @3 21600 pixelHeight"/>
          <v:f eqn="sum @0 0 1"/>
          <v:f eqn="prod @6 1 2"/>
          <v:f eqn="prod @7 21600 pixelWidth"/>
          <v:f eqn="sum @8 21600 0"/>
          <v:f eqn="prod @7 21600 pixelHeight"/>
          <v:f eqn="sum @10 21600 0"/>
         </v:formulas>
         <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
         <o:lock v:ext="edit" aspectratio="t"/>
        </v:shapetype><v:shape id="Picture_x0020_1" o:spid="_x0000_s3073" type="#_x0000_t75"
         alt="VHB" style='position:absolute;
         margin-right:0pt;margin-top:-400pt;
         z-index:-1;
         visibility:visible;mso-wrap-style:square;mso-wrap-distance-left:9pt;
         mso-wrap-distance-top:0;mso-wrap-distance-right:9pt;
         mso-wrap-distance-bottom:0;mso-position-horizontal:absolute;
         mso-position-horizontal-relative:text;mso-position-vertical:absolute;
         mso-position-vertical-relative:text'>
         <v:imagedata src="https://www.google.bg/logos/2012/Rodin-2012-homepage.png"/>
        </v:shape><![endif]--></span>
           <p class=MsoFooter>
           <span style='mso-tab-count:2'></span>
           Page <span style='mso-field-code: PAGE'><span style='mso-no-proof:yes'></span> from <span style='mso-field-code: NUMPAGES'></span>

        <!-- end FOOTER-tags -->
   </span>


        </p>
    </div>



    <div style='mso-element:header' id='fh1'>
        <p class='MsoHeader'><span lang='EN-US' style='mso-ansi-language:EN-US'>&nbsp;<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;<o:p></o:p></span></p>
    </div>

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

</body></html>

You can adjust the watermark picture by setting width, height, margin-top, margin-right on the element v:shape id="Picture_x0020_1" : inline style.

Justin Mitchell · Answer

Try:

<img src="http://www.website.com/path/to/image.jpg" width="width_in_points" height="height_in_points" style="width:width_in_poits;height:height_in_points;" />

For a full example:

<img src="http://www.website.com/path/to/image.jpg" width="233" height="54" style="width:233pt;height:54pt;" />

I'm not terribly familiar with VML and embedding images in Word, but as far as things go it suits my purposes and I'm able to embed it into a Word document. Word will automatically handle the embedding on first load.

Just keep in mind that the default measurement in Word is both centimetres and points, so you have to do it all in points. Probably a good way is to embed the image first off, open in Word, resize if you have to and get the image measurements through word. Then go back to your application and set the width & height. Try to keep the same ratio that Word sets otherwise it'll resize your image. At least that's what Word has been doing to me.

EDIT:

I revised the above image example - it works on some versions of word but doesn't embed the image. You'll get an alert each time you open the file asking you if you want to download an external file. If your office security settings prevent you from doing that, you'll need to embed the file using the first answer, which I've confirmed to work with office 2007+:

        <div style='mso-element:header' id=h1 >
            <span style='mso-no-proof:yes'>
                <!--[if gte vml 1]>
                <v:shapetype id="_x0000_t75"
                    coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe"
                    filled="f" stroked="f">
                    <v:stroke joinstyle="miter"/>
                    <v:formulas>
                        <v:f eqn="if lineDrawn pixelLineWidth 0"/>
                        <v:f eqn="sum @0 1 0"/>
                        <v:f eqn="sum 0 0 @1"/>
                        <v:f eqn="prod @2 1 2"/>
                        <v:f eqn="prod @3 21600 pixelWidth"/>
                        <v:f eqn="prod @3 21600 pixelHeight"/>
                        <v:f eqn="sum @0 0 1"/>
                        <v:f eqn="prod @6 1 2"/>
                        <v:f eqn="prod @7 21600 pixelWidth"/>
                        <v:f eqn="sum @8 21600 0"/>
                        <v:f eqn="prod @7 21600 pixelHeight"/>
                        <v:f eqn="sum @10 21600 0"/>
                    </v:formulas>
                    <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
                    <o:lock v:ext="edit" aspectratio="t"/>
                </v:shapetype>
                <v:shape id="_x0000_s1025" type="#_x0000_t75" alt="" style='position:absolute;
                    margin-left:0;margin-top:2pt;width:537pt;height:57pt;z-index:251659264'>
                    <v:imagedata src="http://www.website.com.au/path/to/image.jpg"/>
                    <w:wrap type="square"/>
                </v:shape>
                <![endif]-->
            </span>
        </div>

Place this in the section:

<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}

Just make sure that all of your measurements are in points.

mwag · Answer

The below example:

is very concise as it strips extra HTML tags and provides an example with about half the lines of code vs other answers
relegates the extra required space for the header/footer element down to 1pt (other answers add several centimeters of invisible content to your doc, which often will cause an extra blank page to appear at the end)
locates the header/footer code at the top of your content, which is a much better location since it won't change regardless of content length
contains working examples of using page number references (some other answers' reference code is broken)

<html>
<head>
    <style type="text/css">
    @page Section1 {
        margin:0.75in 0.75in 0.75in 0.75in;
        size:841.7pt 595.45pt;
        mso-page-orientation:landscape;
        mso-header-margin:0.5in;
        mso-header: h1;
        mso-footer-margin:0.5in;
        mso-footer: f1;
    }

    div.Section1 {page:Section1;}

    p.headerFooter { margin:0in; text-align: center; }
    </style>
</head>
<body><div class=Section1>


<!-- 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=headerFooter>
            Header content goes here
         </p>
      </div>
      &nbsp;
    </td>

    <td>
      <div style='mso-element:footer' id=f1>
        <p class=headerFooter>
        Page
        <span style='mso-field-code:PAGE'></span>
        of
        <span style='mso-field-code:NUMPAGES'></span>
      </p>
      </div>
      &nbsp;
</td></tr></table>

Main content goes here.
Here's a page break:
<br clear=all style='mso-special-character:line-break; page-break-before:always'>
This is page 2

</div></body>
</html>

HTML generated Microsoft Word document with header, footer and watermark

Tags:

html

ms-word

watermark

Georgi Nikolov

3 Answers

Georgi Nikolov

Justin Mitchell

mwag

Recent Activity

Donate For Us

HTML generated Microsoft Word document with header, footer and watermark

Tags:

html

ms-word

watermark

Georgi Nikolov

3 Answers

Georgi Nikolov

Justin Mitchell

mwag

Related questions

Recent Activity

Donate For Us