0

I am tring to get word file from HTML . The problem I am facing is that the header and footer repeating on first page of word in body.Is there is work around to remove or hide the table. I have tried using margin property but that left empty space between header and body (I will show in screen shot). enter image description here The code that I am using : HTML :

<div class="main">
        <table id='hrdftrtbl' border='1' cellspacing='0' cellpadding='0'>
            <tr>
                <td>
                    <div class="header" style='mso-element:header' id="header1">
                        <p class="MsoHeader">
                            <table  style="float: right;width: 100%;">
                                <tbody>
                                    <tr>
                                        <td align="right">
                                            <!--<img src="{!URLFOR($Resource.PDF,'PDF/AdaniPort.png')}" style="float: right;" />-->
                                            <img src="https://adanicf--portsdev--c.cs5.content.force.com/servlet/servlet.ImageServer?id=015O00000031R1i&oid=00DO000000555mR&lastMod=1565955266000"  height='80' width='60'  style="float: right;width=2% !important;height=6% !important"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="right"><b>{!LogoPortName}</b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <hr size="2" style="color: black;" />
                                        </td>
                                    </tr>
                                    
                                </tbody>
                        </table></p>
                </div>
        </td>
        <td>
            <div class="footer" style='mso-element:footer' id="footer1">
                <p class="MsoFooter">
                    <!-- <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div> -->
                    <table id="ftrtbl" 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"> Page <span style='mso-field-code: PAGE '></span> of <span style='mso-field-code: NUMPAGES '></span><span class="pagenumber" />
                            </td>
                        </tr>
                </table>
            </p>
        </div>
    </td>
</tr>

CSS (using margin):

 @page main {
                mso-header:header1;
                mso-footer:footer1;
                mso-paper-source:0;
                
                mso-header-margin:0.5in;
                mso-footer-margin:0.5in;
                }
                div.main {
                page:main;
                }
                p.MsoFooter, li.MsoFooter, div.MsoFooter {
                mso-pagination:widow-orphan;
                tab-stops:center 216.0pt right 432.0pt;
                }
                p.MsoHeader, li.MsoHeader, div.MsoHeader {
                mso-pagination:widow-orphan;
                width:1px;
                height:1px;
                }
                table#hrdftrtbl{
 margin:50in 0in 0in 15in;} 

            
  • How are you converting it? Maybe your tool is taking `class="header"` and duplicating it automatically? – Justinas Jan 05 '22 at 09:02
  • I am using visualforce ( a salesforce-CRM language) for conversion. No the class "header" is not causing that. I updated the CSS for more convenience. – NewBaySales Jan 05 '22 at 09:16

2 Answers2

0

Already Answered kindly check the link

How to use HTML to print header and footer on every printed page of a document?

thead: this is for the repeated header.

tfoot: the repeated footer.

tbody: the content.

Ivin Raj
  • 3,448
  • 2
  • 28
  • 65
0

I have not found the proper solution but the trick worked for me is I changed the position of header-footer code below the body tag so that the empty space will be shifted from first page to last page.

exp: Before:

<div class="main">
---------
-----------
</div>

<body>
----------
----------
</body>

After:

<body>
----------
----------
</body>
<div class="main">
---------
-----------
</div>