logo标签列表

生成带页眉、页脚和水印的HTML格式Microsoft Word文档

htmlms-wordwatermark
15

我正在寻找一个由HTML生成的Microsoft Word文档示例，其中应包含页眉、页脚和水印。

3个回答
38

这是一个例子，希望能帮助那些试图使用HTML生成MS Word .doc文件的人。

<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>

您可以通过在元素v:shape id="Picture_x0020_1"中设置width、height、margin-top、margin-right的内联样式来调整水印图片。
嗨Vencedor，你能告诉我如何在上面的代码中插入HTML文本而不是图片吗？ - Jitender Kumar
<span style=mso-tab-count:2'></span> 缺少单引号吗？应该是 <span style='mso-tab-count:2'></span>。 - mwag
此外，在字段代码后和单引号结束符之前存在多余的空格（例如PAGE '），这会导致公式出现问题。 - mwag
嗨，这里有什么代码可以获得行号以及页眉和页脚呢？ - Madhura
谢谢，但是当我将这个文件保存为docx格式时，页眉和页脚会消失，所以微软Word似乎无法处理这种方法。 - thespacecamel
是的 @thespacecamel，我提供的解决方案是针对“.doc”而不是“.docx”的，这是11年前的事了。 - vencedor
8
下面的例子：
  • 非常简洁，因为它剥离了额外的HTML标签，并提供了一个比其他答案减少约一半代码行数的示例
  • 将必要的页眉/页脚元素所需的额外空间降至1pt（其他答案会在您的文档中添加几厘米不可见内容，通常会导致额外的空白页出现在最后）
  • 将页眉/页脚代码定位在内容的顶部，这是一个更好的位置，因为它不会因为内容长度而改变
  • 包含使用页面编号引用的工作示例（有些其他答案的参考代码是有问题的）
<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>
1
感谢mwag的方法，帮了我很多忙。如果有人想要一个简单的方法来创建受保护的Word文档，可以尝试以下步骤：在MS Office中保护Word文档，保存并在Notepad++中编辑文件，查找以下标签： <w:DocumentProtection>ReadOnly</w:DocumentProtection> <w:UnprotectPassword>abc</w:UnprotectPassword> 然后将这些行复制并添加到</head>之前，并使用适当的XML标记。 - Oguen
4

尝试：

<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设置相同的比例，否则它会重新调整您的图像。至少这就是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="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>

将此放置在 <head> 部分：

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

请确保您所有的测量单位均为“点”。

嘿，我使用了这个例子...非常好用！但是我还需要在页脚添加一张图片。我想不出该怎么做。你有什么想法吗？ - Aman Gupta
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接