HTML 生成的 Microsoft Word 文档，带有页眉、页脚和水印
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13340216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML generated Microsoft Word document with header, footer and watermark
提问by vencedor
I'm looking for an example of a Microsoft Word Document generated by HTML. It should contain a header, footer and a watermark.
我正在寻找由 HTML 生成的 Microsoft Word 文档的示例。它应该包含页眉、页脚和水印。
回答by vencedor
This is some example, hope it helps others that are trying to generate ms word .doc file with HTML.
这是一些示例，希望它可以帮助其他尝试使用 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> </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.
您可以通过在元素 v:shape id="Picture_x0020_1" : inline style 上设置宽度、高度、margin-top、margin-right 来调整水印图片。
回答by Justin Mitchell
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.
我不太熟悉 VML 和在 Word 中嵌入图像，但就事情而言，它符合我的目的，我能够将它嵌入到 Word 文档中。Word 将在第一次加载时自动处理嵌入。
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.
请记住，Word 中的默认度量单位是厘米和磅，因此您必须全部以磅为单位。可能一个好方法是先嵌入图像，在 Word 中打开，如果需要调整大小并通过 Word 获取图像尺寸。然后返回到您的应用程序并设置宽度和高度。尽量保持 Word 设置的相同比例，否则它会调整您的图像大小。至少 Word 一直在对我做这件事。
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+:
我修改了上面的图像示例 - 它适用于某些版本的 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>
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.
只需确保您的所有测量值都以点为单位。
回答by mwag
The below example:
下面的例子：
- is very concise as it strips extra HTML tags and provides an example with about half the lines of code vs other answers
- relegates the extra required space for the header/footer element down to 1pt (other answers add several centimeters of invisible content to your doc, which often will cause an extra blank page to appear at the end)
- locates the header/footer code at the topof your content, which is a much better location since it won't change regardless of content length
- contains working examples of using page number references (some other answers' reference code is broken)
- 非常简洁，因为它去除了额外的 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>
</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>
</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>
