HTML Generated Microsoft Word Document with Header, Footer and Watermark

HTML generated Microsoft Word document with header, footer and watermark

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> </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'> <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'> <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.

unwanted squares in MS Word doc generated from HTML

Found it. I had to add another <div> block for each header and footer:

<div style='mso-element:header'>
  <p class='MsoHeader'>
    <span> <o:p></o:p></span>
  </p>
</div>

and accordingly

<div style='mso-element:footer'>
  <p class='MsoFooter'>
    <span> <o:p></o:p></span>
  </p>
</div>

Apparently the <o:p></o:p> tags are responsible for those squares.

How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

I've managed to solve this myself:

If you want to scale an image based on one side in word using HTML then this code will do it:

$newheight = 50;
list($originalwidth, $originalheight) = getimagesize($logourl);
$ratio = $originalheight / $newheight;
$newwidth = $originalwidth / $ratio;
echo '<img class="cobrandedlogo" src="' . $logourl . '" height="50" width="' . $newwidth . '" />';

Swap newheight and newwidth if you want to scale based on the width instead.

HTML Generated Microsoft Word Document with Header, Footer and Watermark