Microsoft Word HTML document with header, footer and watermark

I am looking for an example Microsoft Word document created by HTML. It must contain a header, footer, and watermark.

+11
source share
3 answers

This is an example, I hope that it helps others who are trying to generate the .doc ms word 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 image by setting the width, height, top edge, margin-right on the v element: shape id = "Picture_x0020_1": inline style.

+30
source

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 complete example:

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

I am not very familiar with VML and embed images in Word, but as it seems to me, this is suitable for my purposes and I can embed it in a Word document. Word will automatically handle the attachment on first boot.

Just keep in mind that the default dimension in Word is both centimeters and dots, so you need to do all this with glasses. Probably a good way is to insert the image first, open it in Word, resize it if you need, and get the image dimensions through the word. Then go back to your application and set the width and height. Try to keep the same ratio as Word, otherwise it will resize your image. At least what the Word does to me.

EDIT:

I reviewed the example image above - it works with some versions of the word, but does not insert the image. You will receive warnings every time you open a file asking you if you want to download an external file. If your office security settings prevent you from doing this, you need to insert the file using the first answer that I confirmed for working 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> 

Put 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 all your measurements are in points.

+4
source

Example below:

  • very concise as it selects extra HTML tags and gives an example with about half the lines of code and other answers
  • Allocates additional space for the header / footer element to 1pt (other answers add a few centimeters of invisible content to the document, which often leads to an additional blank page at the end)
  • finds the header / footer code at the top of your content, which is much better since it will not change regardless of the length of the content
  • contains working examples of using links to page numbers (the link code of some other answers does not work)
 <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 a page break: <br clear=all style='mso-special-character:line-break; page-break-before:always'> This is page 2 </div></body> </html> 
0
source

Source: https://habr.com/ru/post/949603/


All Articles