CODEWITHSUNDEEP
htmlcssms-word
user1308665
user1308665

Reputation: 45

Apply "Different First Page" MS Word Option for Header and Footer To Dynamically Generated Word Doc Using

I have an HTML page with dynamic content that opens using Word with the following layout:

I found a template that uses Office XML and CSS to add a header and footer. I've included a logo and page number in the footer . I've been looking for a way to have the footer display starting in Page 2 (both logo and page number) . In MS Word 2007 there is an option when the header/footer are selected; Design Tab --> Options Menu --> Different First Page to not display both header and footer in the first page.

I've been trying CSS by assigning the div class containing the Cover page the display:none attribute:

 .coverP #Section1
{ display:none;}

with no success. I've trimmed the contents of my pages to use as an example along with the code below (source a link!)

If anyone has an idea of how this could be done it would be greatly appreciated.

<%@ Language="VBScript" %>
<%
'test
%>
<apex:page sidebar="false" contentType="application/msword" cache="true">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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'>
<html xmlns:w="urn:schemas-microsoft-com:office:word">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns='http://www.w3.org/TR/REC-html40'
xmlns:w="urn:schemas-microsoft-com:office:word">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Report</title> 
<xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>100</w:Zoom>
<w:DoNotOptimizeForBrowser/>
</w:WordDocument>
</xml>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape{behavior:url(#default#VML);}

</style>
 <style>
            p.MsoHeader, li.MsoHeader, div.MsoHeader{
                margin:0in;
                margin-top:.0001pt;
                mso-pagination:widow-orphan;
                tab-stops:center 3.0in right 6.0in;
            }
            p.MsoFooter, li.MsoFooter, div.MsoFooter{
                margin:0in;
                margin-bottom:.0001pt;
                mso-pagination:widow-orphan;
                tab-stops:center 3.0in right 6.0in;
            }
            @page Section1{
                size:8.5in 11.0in; 
                margin:0.5in 0.5in 0.5in 0.5in;
                mso-header-margin:0.5in;
                mso-header:h1;
                mso-footer:f1; 
                mso-footer-margin:0.5in;
                mso-paper-source:0;
            }
            div.Section1{
                page:Section1;
            }

            table#hrdftrtbl{
                margin:0in 0in 0in 9in;
            }        
        </style>
      </head>

    <body>
        <!-- Content -->
        <div class="Section1">
            <!-- Cover Page 1  -->
                          <div class="coverP">
            Cover page text goes here
            </div>
            <br clear="all" style="page-break-before:always" />

            <!-- Page 2 Starts -->
        <div>
        Page 2 goes here with footer (pg#2 and logo)
         </div>

            <br clear="all" style="page-break-before:always" />

            <!-- Page 3 Starts -->
        <div>
           <p>Page 3 data part of report goes here </p>
         </div>  

           <!-- End of page 3 -->

            <!--Header and Footer Starts-->
            <table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0'>
                <tr>
                    <td>
                        <!--Header-->
                        <div style='mso-element:header' id="h1" >
                            <p class="MsoHeader">

                            </p>
                        </div>
                    </td>

                    <td>
                    <!--Footer-->
                    <div style='mso-element:footer' id="f1">
                     <p class="MsoFooter">
                      <table width="100%" border="1" cellspacing="0" cellpadding="0">
                        <tr>
                       <td width="30%">

                          </td>
                          <td align="center" width="40%">
                          <!-- Footer Logo-->
    <div align="center"><img src="logo.png">   </div> 
                           </td>
              <td align="right" width="30%">
              Page <span style='mso-field-code: PAGE '></span> 
                           </td>
                          </tr>
                         </table>
                            </p>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
       </body>
   </html>
  </apex:page>
 <%
   Response.Buffer = true
   Response.ContentType = "application/vnd.ms-word"
   Response.AddHeader "content-disposition","inline;filename=report.doc"
 %>

Upvotes: 1

Views: 3875

Answers (1)

Vincent Teyssier
Vincent Teyssier

Reputation: 2217

I ran into the same problem and finally found the answer. You have to set up the following :

mso-title-page: yes;

And then when you attach your header and footer, replace mso- by mso-first- :

mso-first-header:h1;
mso-first-footer:f1;

That's it :) tested and working

Upvotes: 2

Related Questions