function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
krishna chaitanya 35krishna chaitanya 35 

VF page Doc conversion - Footeris being displayed twice on last page.

Hi All,
I am developing one visualforce page which render as word doc,but the footer is displayed twice in the last page.
=============================sample code=========================
<apex:page standardController="Case"   sidebar="false" showHeader="false"  contentType="application/msword" cache="true" >
    
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
     <style type="text/css">
     
                
         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-footer:f1; 
                    mso-footer-margin:0.5in;
                    mso-paper-source:0;
                }
                div.Section1{
                    page:Section1;
                }
                table#hrdftrtbl{
                    margin:0in 0in 0in 9in;
                }
            </style>
</head> 
     <apex:form >
    
    <body>
     <br clear="all" style="page-break-before:always" />
        <div class="Section1">
           <table width="100%" border="1" >
                <tr>
                  <td width="40%" align="Center" style="margin-left: -20px;">
                           
                         
                       <apex:image  width="150" height="75"/>
                       
                   </td>
                    <td width="40%" align="center" >
                     <b><span style="font-size: 20px;">Test Report </span></b><br/>
                     <b><span style="font-size: 16px;padding-left: 5px;">Test Report</span></b> 
                  </td> 
                  
                     <td width="20%" align="center">
                    <span >Created Date:</span> <br/>
                    <apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                            <apex:param value="{!today()}"/>
                            </apex:outputText><br/>
                            <span style="font-size: 16px;padding-left: 5px;">Version 1</span>
                                               
                         </td>
                
                    
                    
                    
                    
                    </tr> 
                 
            </table><br/>
            
               
            
            </div>
            <div style='mso-element:footer' id="f1" >
                               
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" >
                                     <p class="MsoFooter">
                                        <tr>
                                            <td width="50%" word-spacing="5px">
                                                Constructed: SHEQ{!$User.FirstName} {!$User.LastName}<br/>
                                                VA 7.5.1 Steering documented information of conformity
                                            </td>
                                            <td align="center" width="20%">
                                           <apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                                            <apex:param value="{!Case.CreatedDate}"/>
                                            </apex:outputText>
                                            </td>
                                            <td align="center" width="30%">
                                                Page <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span>
                                                <br/>
                                                Print Date:<apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                                                <apex:param value="{!today()}"/>
                                                </apex:outputText>
                                            </td>
                                        </tr>
                                        </p>
                                    </table>
                                
                            </div>
                 
                          
        </body>
        
        </apex:form>
        
      
        </apex:page>
=================================================================
=====================sample output============================
User-added image
============================================================
Best Answer chosen by krishna chaitanya 35
Rahul.ChaudhariRahul.Chaudhari
Hi Krishna,

Please find below working code:
 
<apex:page standardController="Case"   sidebar="false" showHeader="false"  contentType="application/msword" cache="true" >
    
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <style type="text/css">
            
            
            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-footer:f1; 
            mso-footer-margin:0.5in;
            mso-paper-source:0;
            }
            div.Section1{
            page:Section1;
            }
            table#hrdftrtbl{
            margin:0in 0in 0in 9in;
            }
        </style>
    </head> 
    
    <apex:form >
        
        <body>
            <br clear="all" style="page-break-before:always" />
            <div class="Section1">
                <table width="100%" border="1" >
                    <tr>
                        <td width="40%" align="Center" style="margin-left: -20px;">
                            
                            
                            <apex:image width="150" height="75"/>
                            
                        </td>
                        <td width="40%" align="center" >
                            <b><span style="font-size: 20px;">Test Report </span></b><br/>
                            <b><span style="font-size: 16px;padding-left: 5px;">Test Report</span></b> 
                        </td> 
                        
                        <td width="20%" align="center">
                            <span >Created Date:</span> <br/>
                            <apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                                <apex:param value="{!today()}"/>
                            </apex:outputText><br/>
                            <span style="font-size: 16px;padding-left: 5px;">Version 1</span>                                               
                        </td>
                    </tr>                  
                </table><br/>           
            </div>
            <table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
                
                <tr>
                    <td>
                        <!-- HEADER --> 
                    </td>
                    
                    <td>
                        <div style='mso-element:footer' id="f1" >                               
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" >
                                <p class="MsoFooter">
                                    <tr>
                                        <td width="50%" word-spacing="5px">
                                            Constructed: SHEQ{!$User.FirstName} {!$User.LastName}<br/>
                                            VA 7.5.1 Steering documented information of conformity
                                        </td>
                                        <td align="center" width="20%">
                                            <apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                                                <apex:param value="{!Case.CreatedDate}"/>
                                            </apex:outputText>
                                        </td>
                                        <td align="center" width="30%">
                                            Page <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span>
                                            <br/>
                                            Print Date:<apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                                            <apex:param value="{!today()}"/>
                                            </apex:outputText>
                                        </td>
                                    </tr>
                                </p>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>     
        </body>
        
    </apex:form>
    
    
</apex:page>

If it works then mark this as best answer.

Thanks,
Rahul Chaudhari

All Answers

Rahul.ChaudhariRahul.Chaudhari
Hi Krishna,

Please find below working code:
 
<apex:page standardController="Case"   sidebar="false" showHeader="false"  contentType="application/msword" cache="true" >
    
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <style type="text/css">
            
            
            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-footer:f1; 
            mso-footer-margin:0.5in;
            mso-paper-source:0;
            }
            div.Section1{
            page:Section1;
            }
            table#hrdftrtbl{
            margin:0in 0in 0in 9in;
            }
        </style>
    </head> 
    
    <apex:form >
        
        <body>
            <br clear="all" style="page-break-before:always" />
            <div class="Section1">
                <table width="100%" border="1" >
                    <tr>
                        <td width="40%" align="Center" style="margin-left: -20px;">
                            
                            
                            <apex:image width="150" height="75"/>
                            
                        </td>
                        <td width="40%" align="center" >
                            <b><span style="font-size: 20px;">Test Report </span></b><br/>
                            <b><span style="font-size: 16px;padding-left: 5px;">Test Report</span></b> 
                        </td> 
                        
                        <td width="20%" align="center">
                            <span >Created Date:</span> <br/>
                            <apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                                <apex:param value="{!today()}"/>
                            </apex:outputText><br/>
                            <span style="font-size: 16px;padding-left: 5px;">Version 1</span>                                               
                        </td>
                    </tr>                  
                </table><br/>           
            </div>
            <table id='hrdftrtbl' border='0' cellspacing='0' cellpadding='0'>
                
                <tr>
                    <td>
                        <!-- HEADER --> 
                    </td>
                    
                    <td>
                        <div style='mso-element:footer' id="f1" >                               
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" >
                                <p class="MsoFooter">
                                    <tr>
                                        <td width="50%" word-spacing="5px">
                                            Constructed: SHEQ{!$User.FirstName} {!$User.LastName}<br/>
                                            VA 7.5.1 Steering documented information of conformity
                                        </td>
                                        <td align="center" width="20%">
                                            <apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                                                <apex:param value="{!Case.CreatedDate}"/>
                                            </apex:outputText>
                                        </td>
                                        <td align="center" width="30%">
                                            Page <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span>
                                            <br/>
                                            Print Date:<apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                                            <apex:param value="{!today()}"/>
                                            </apex:outputText>
                                        </td>
                                    </tr>
                                </p>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>     
        </body>
        
    </apex:form>
    
    
</apex:page>

If it works then mark this as best answer.

Thanks,
Rahul Chaudhari
This was selected as the best answer
krishna chaitanya 35krishna chaitanya 35
Hi Rahul Chaudhari,
Thank you for your help .The code works fine ,noe there is no repetition of footer.

Regards,
Krishna.
krishna chaitanya 35krishna chaitanya 35
Hello Rahul Chaudari,

Can you please help me on this below issue:
footer is displayed above the content in vf pgae when it is rendered as a pdf
<apex:page standardController="Contact" sidebar="false" showHeader="false" renderAs="PDF">
 <head>
        <style type="text/css" media="print">
            span.cls_002 {
                font-size: 12.0px;
                color: rgb(0, 0, 0);
                font-weight: bold;
                font-style: normal;
                text-decoration: none
            }
            
            div.cls_002 {
                font-size: 9.0px;
                color: rgb(0, 0, 0);
                font-weight: bold;
                font-style: normal;
                text-decoration: none
            }
            
            @page {
                <!--size: 32.7cm 25.9cm;  
                margin-top: 20%;  
                margin-bottom:9%;
                margin-right: 7%;
                margin-left: 5%;
                size: A4;-->
                size: 26.7cm 19.9cm;
               margin: 1in .5in 2in .5in;
                @top-center {
                    content: element(header);
                }
                @bottom-center {
                    content: element(footer);
                }
            }
            
            div.content {
                padding: 0 0 30px 0;
            }
            
            div.header {
                font-weight: bold;
                padding: 10px;
                position: running(header);
            }
            
             div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }
        .pagenumber:before {
            content: counter(page);
        }
        .pagecount:before {
            content: counter(pages);
        }
        </style>
        <style>
            body {
                font-family: 'Arial Unicode MS';
            }
            
            #index {
                font-family: 'Arial Unicode MS';
            }
            
            <!--@page {
                size: landscape;
            }
            
            --> <!--@page {
                size: 32.7cm 26.5cm;
                margin-top: 0.01cm;
                margin-left: 0.5cm;
                margin-right: 1.0cm;
                margin-bottom: 0.0cm;
            }
            
            -->
        </style>
    </head>

    <apex:form>

        <body id="index">

            <div class="header">
                <div>
                
                <table width="100%">
                        <tr>
                        <!--<td>
                            <apex:image value="{!$Resource.testLogo}" height="100%" width="100%"/>
                     </td>-->
                            <td width="50%" align="left" style="margin-left: -10px;">
                                <b><span style="font-size: 14.5px;margin-left: 0px; ">test-Werke GmbH</span></b>

                            </td>

                        </tr>
                    </table>

                    <table width="100%" border="0">
                        <tr>
                            <td width="15%">
                                <span class="cls_002">test-Werke testr testr 71-163 testr testr</span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002">Ihr Ansprechpartner:</span>
                            </td>
                            <br/>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">{!Contact.account.name}</span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002">{!$User.FirstName}</span>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">{!Contact.FirstName} {!Contact.LastName} </span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002"> {!$User.LastName} </span>
                            </td>

                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">{!contact.account.billingstreet}</span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002"> Customer Service</span>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">{!contact.account.billingpostalcode} {!contact.account.billingcity} </span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002">Phone: {!$User.Phone} </span>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">{!contact.account.billingcountry}</span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002">Fax: {!$User.Fax}</span>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">&nbsp;</span>
                            </td>
                            <td width="10%" align="right">
                                <span class="cls_002"> {!$User.Email}</span>
                            </td>
                        </tr>
                        <tr>
                            <td width="15%">
                                <span class="cls_002">&nbsp;</span>
                            </td>
                            <td width="10%" align="right">
                                <span>testr:</span>
                                <apex:outputText value="{0,date,dd'.'MM'.'yyyy}">
                                    <apex:param value="{!today()}" />
                                </apex:outputText>

                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <div class="footer">
                <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>
         <hr/>
         <div>
                <table width="100%">
                    <tr>
                        <td>
                            <span class="cls_002">test-Werke testr</span>
                        </td>
                        <td>
                            <span class="cls_002">testr</span>
                        </td>
                        <td>
                            <span class="cls_002">testr</span>
                        </td>
                        <td>
                            <span class="cls_002">info@testgroup.com</span>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <span class="cls_002">testr 71-163</span>
                        </td>
                        <td>
                            <span class="cls_002">testr testr</span>
                        </td>
                        <td>
                            <span class="cls_002">testr testr:testr</span>
                        </td>
                        <td>
                            <span class="cls_002">www.testr.com</span>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <span class="cls_002">D-testr testr</span>
                        </td>
                        <td>
                            <span class="cls_002">testr testr</span>
                        </td>
                        <td>
                            <span class="cls_002">testr:testr testr</span>
                        </td>
                        <td>
                            <span class="cls_002">&nbsp;</span>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <span class="cls_002">&nbsp;</span>
                        </td>
                        <td>
                            <span class="cls_002">testr.testr testr</span>
                        </td>
                        <td>
                            <span class="cls_002">&nbsp;</span>
                        </td>
                        <td>
                            <span class="cls_002">&nbsp;</span>
                        </td>

                    </tr>
                </table>
                </div>
                </div>
                <div class="content" style="border-style: double" >
                </div>
                        </body>
    </apex:form>
</apex:page>
User-added image
ManjusrinuManjusrinu

Hi @Rahul.Chaudhari
The Header and footer works Fine For Me.

But the issue is  regrading the image quality.

I have used render as word dcoument ,when i see the output in word doc , it is getting Blur.But When i double click on the image,it is showing Different Style like becoming Bold. Can i know why this issue is comming.

 

Before Double Click OR Before Edit

 

 

After Double Click OR In Edit Mode

 

Can i know the solution To Overcome the issue ?..