css print mode: display header and footer only on first page of a generated word doc

问题

I'm successfully generating word documents using html code with header and footer styled in css print mode, here is my code :

<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
<head><title>Mon document</title>
<meta charset=\"UTF-8\" />
<!--[if gte mso 9]>
<xml><w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom><w:DoNotOptimizeForBrowser/></w:WordDocument></xml>
<![endif]-->
<link rel=File-List href=\"mydocument_files/filelist.xml\">
<style><!-- 
@page
{
    size:21cm 29.7cmt;  /* A4 */
    margin:1cm 1cm 1cm 1cm; /* Margins: 2.5 cm on each side */
    mso-page-orientation: portrait;  
    mso-header: url(\"mydocument_files/headerfooter.htm\") h1;
    mso-footer: url(\"mydocument_files/headerfooter.htm\") f1;  
}
@page Section1 { }
div.Section1 { page:Section1; }
p.MsoHeader, p.MsoFooter { border: none; }
--></style>
</head>
<body>
<div class=Section1>
 my content
</div>
</body>
</html>

What I would like to do is to display the header and footer only on first page. For that I have tried to apply visibility:hidden to the header and footer for pages different than first this way :

p.MsoHeader, p.MsoFooter { border: none; visibility: hidden;}
p.MsoHeader :first, p.MsoFooter :first { border: none; visibility: visible;}

But the header and footer are still displayed on all pages... Any idea how to do the trick?

回答1:

Try this:

p.MsoHeader, p.MsoFooter { border: none; display: none;}
p.MsoHeader :first, p.MsoFooter :first { border: none; display: block;}

Or, if this doesn't work, it's better if you don't call the header and the footer in the first play, so just remove these two lines from the pages that you don't want the header and the footer to appear in:

mso-header: url(\"mydocument_files/headerfooter.htm\") h1;
mso-footer: url(\"mydocument_files/headerfooter.htm\") f1;

回答2:

When comparing word generated html, I have missed one crucial mso css tag :

mso-first-header: url ...

Instead of mso-header.

Together with that, the attribute mso-title-page must also be set to yes.

By combining these two you get the desired effect!

来源：https://stackoverflow.com/questions/35287383/css-print-mode-display-header-and-footer-only-on-first-page-of-a-generated-word

标签

html

css

ms-word

wordml