1. 首頁
  2. 問答
  3. HTML生成帶有頁眉，頁腳和水印的Microsoft Word文檔

HTML生成帶有頁眉，頁腳和水印的Microsoft Word文檔

2012-11-12 78 views

回答

22

這是一些例子，希望它可以幫助其他人試圖用HTML生成ms word .doc文件。形狀ID =「Picture_x0020_1」：

<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="[email protected]@[email protected]@[email protected]@[email protected]@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>

可以通過設置元v上的寬度，高度，邊距，邊緣右調整水印圖象內嵌樣式。

來源

2012-11-12 08:12:41 vencedor

+0

嗨Vencedor，你可以請我寫我如何插入HTML文本，而不是在上面的代碼中的圖像？ –

3

嘗試：

<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;" />

對於一個完整的例子：

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

我並不十分熟悉VML，並在Word中嵌入圖像，但至於事情它適合我的目的，我可以將它嵌入到Word文檔中。 Word將在第一次加載時自動處理嵌入。

請記住，Word中的默認度量既是釐米也是點，因此您必須以點爲單位。可能一個好方法是首先將圖像嵌入，在Word中打開，如果必須調整大小並通過單詞獲取圖像測量結果。然後返回到您的應用程序並設置寬度爲&高度。儘量保持Word設置的相同比例，否則會調整圖像大小。至少這是Word對我做的事情。

編輯：

我修改了上面的圖像例子 - 它可以在字的一些版本，但沒有嵌入圖像。每次打開文件時都會收到警報，詢問您是否要下載外部文件。如果你的辦公室的安全設置防止你這樣做，你需要使用的第一個答案，我已經證實了與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="[email protected]@[email protected]@[email protected]@[email protected]@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>

將在本節：

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

只要確保所有的測試都在點。

來源

2013-06-21 12:37:01

+0

嘿，用過這個例子..太棒了！但我也需要添加一個圖像到頁腳。無法弄清楚如何做到這一點。有什麼想法？ –

相關問題

 相關問題