4

I have a Vf page which renders as a word document. This word document needs to have a header & a footer with page counter & image (logo). The same code for rendering page as PDF doesnt work in style class.

4

You will need the mso-header, mso-footer and mso-pagination style attributes. For more info you can download official misrosoft lib: Microsoft Office HTML and XML Reference

Something like this:

<apex:page sidebar="false"
           showChat="false"
           showHeader="false"
           contentType="application/msword#Test.doc" 
           cache="true">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style>
    @page Main {
        mso-header:h1;
        mso-footer:f1;
    }
    div.Main{
        page:Main;
    }
    p.MyFoot, li.MyFoot, div.MyFoot{
        mso-pagination:widow-orphan;
        tab-stops:center 216.0pt right 432.0pt;
    }
    p.MyHead {

    }
</style>
</head> 

<div class="Main">
    <div style="mso-element:header" id="h1">
        <p class="MyHead">Header Text</p>
    </div>
    <div style="mso-element:footer" id="f1">
        <p class="MyFoot">
            <span style='mso-field-code:" FILENAME "'> </span>
            <span style='mso-tab-count:2'></span>
            Page <span style='mso-field-code:" PAGE "'></span> of <span style='mso-field-code:" NUMPAGES "'></span>
        </p>
    </div>
</div>

</apex:page>
  • 1
    @mastOr - I tried using the same thing but i get header on the first page as body content only, not as a Word doc header. Can you please suggest what might be wrong there. – NaveenRaw Jul 27 '15 at 14:41
  • 1
    @mast0r - Even I'm facing same problem as naveen can you please help me resolve it. – Sharat Dec 16 '15 at 10:19
1

The only issue with Sergey's solution is that the 'template' for the header and footer are not hidden, but displayed in the word document. It turns out the trick is to push the header/footer 'template' off of the page. It fixes the issue of displaying the header and footer 'template' in the body of the word document.

I got the solution from this post. Here is the solution code, reposted:

 <apex:page sidebar="false" contentType="application/msword" cache="true">
    <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='<a target="_blank" href="http://www.w3.org/TR/REC-html40'" rel="nofollow">http://www.w3.org/TR/REC-html40'</a>>
        <head>
            <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;
                }
                /*Below is the style to prevent the repetition of header and Footer.. Cheers!!!*/
                table#hrdftrtbl{
                    margin:0in 0in 0in 9in;
                }        
            </style>
        </head>

        <body>
            <!-- Content -->
            <div class="Section1"><!--Section1 div starts-->
                <!-- Page 1 starts -->
                <br/>
                Page 1 Content

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


                <!-- Page 2 Starts -->
                <br/>
                Page 2 Content

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

                <!-- Page 3 Starts -->
                <br/>
                Page 3 Content

                <!--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">
                                    <table border="1" width="100%">
                                        <tr>
                                            <td width="30%">
                                                Left <br/>Header
                                            </td>
                                            <td align="center" width="40%">
                                                Center<br/> Header
                                            </td>
                                            <td align="right" width="30%">
                                                Right<br/>Header
                                            </td>
                                        </tr>
                                    </table>
                                </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%">
                                                Left<br/>Footer
                                            </td>
                                            <td align="center" width="40%">
                                                Center<br/>Footer
                                            </td>
                                            <td align="right" width="30%">
                                                Page <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span>
                                            </td>
                                        </tr>
                                    </table>
                                </p>
                            </div>
                        </td>
                    </tr>
                </table>
            </div><!--Section1 div ends-->
        </body>
    </html>
</apex:page>
  • I try this same example but it does't work. – One Feb 7 at 14:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.