HTML generated Microsoft Word document with header

2019-01-11 00:17发布

站内问答 / 前沿技术
771 2 6

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

2条回答
欢心
2楼-- · 2019-01-11 00:18

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.

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
3楼-- · 2019-01-11 00:41

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)