0

I am trying to get a word document from the VF page. Now I am able to get the content and images from the VF page but struggling with the header and footer . I will show the code that I am using for displaying the header and footer in PDF. I have tried other solutions from google but did not succeed. Please someone help me out here. I have tried Header and Footer repeating in end of the word document solution but did not work.
CSS that I am using :

    @page {
                   padding-top: 70px;
                   background: url('{!URLFOR($Resource.PDF,'PDF/DraftImage.png')}') no-repeat center;
    
                   @top-center {
                           content: element(header);
                   }
                   @bottom-left {
                         content: element(footer);
                   }
                }
               
               div.header {
                          padding: 10px;
                          position: running(header);
                            
               }
             div.footer {
                    display: block;
                    padding: 5px;
                   position: running(footer);
             }
                
             
            .pagenumber:before {
                            content: counter(page);
            }
            .pagecount:before {
                 content: counter(pages);
            }
        .gridtable {
            border-collapse: collapse;
        }

        .gridtabletd{
            border: 1px solid black;
        } 
              table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }   
@media print {
    table {
        page-break-inside: avoid;
    }

HTML :

<div class="header">

        <table style="float: right;width: 100%;">
            <tbody>
                <tr>
                    <td align="right">
                        <!--<img src="{!URLFOR($Resource.PDF,'PDF/Port.png')}" style="float: right;" />-->
                        <apex:image value="{!$Resource.PortLogo}" width="80" height="60" style="float: right;"/>
                    </td>
                </tr>
                <tr>
                    <td align="right"><b>{!LogoPortName}</b>
                    </td>
                </tr>
                <tr>
                    <td>
                        <hr size="2" style="color: black;" />
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
    <div class="footer">
        <!-- <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div> -->
        <table style="float: right;width: 100%;">
            <tr>
                <td colspan="2">
                    <hr size="2" style="color: black;" />
                </td>
            </tr>
            <tr>
                <td style="width:40%;font-size:14px;" align="left" >This Document is strictly confidential</td>
                <td style="width:40%;font-size:14px;" align="left" >{!quote.Ref_No__c}</td>
                <td style="width:20%;font-size:14px;" align="right"><span class="pagenumber" />
                </td>
            </tr>
        </table>
    </div>

1 Answer 1

1

This is MS Doc specific so you need to have Visualforce spit out tags that will play nice with it. Essentially there are certain Microsoft Office style attributes only supported by Microsoft Word that need to be included. There are posts on Stack Overflow with examples.

@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;
}
2
  • My bad, I was opening the generated word document in google docs. I think that's why I was facing a problem but the attached link in your response also helped me to set the size of the images . But I am still facing one more issue which is the footer and header are rendering on the first page of the word as content also. Any solutions to remove that. Jan 5, 2022 at 6:21
  • Check this post: stackoverflow.com/questions/22879941/… Also, if you ultimately need these documents in Google Docs, they support HTML, RTF, and ODT as formats (you aren't constrained to .DOC). There's also a Google Doc API for generating documents.
    – nbrown
    Jan 5, 2022 at 15:11

Not the answer you're looking for? Browse other questions tagged .