1

I am rendering my page as a pdf but when the data gets larger my table's format is breaking. I want a closing line in each page of my pdf whether the data is large or going to next page. Can Someone help me out?

<apex:page standardController="Case" extensions="TimeEntryList" showHeader="false" sidebar="false" applyBodyTag="false" docType="html-5.0" >

$(function () { $( "#myLocalStartDate" ).datepicker({dateFormat: 'yy-mm-dd'}); $( "#myLocalEndDate" ).datepicker({dateFormat: 'yy-mm-dd'}); });
<head>

    <style type="text/css" media="print">
        @page {
            size: A4 landscape;

            @bottom-right {
            content: "Page " counter(page) " - " counter(pages);
            font-family: 'Arial', 'Helvetica', sans-serif;
            font-size:10px;

            }

        }




    </style>
</head>



    <apex:form >

    <apex:pageMessages ></apex:pageMessages>



    <b style="padding-left: 42px;">Start Date</b>
     <input type='text' id="myLocalStartDate" class="form-control" placeholder="StartDate(yyyy-mm-dd)" onchange="callActionStart(this.value);"/>



    <b style="padding-left: 50px;">End Date </b> 
     <input type='text' id="myLocalEndDate" class="form-control" placeholder="EndDate(yyyy-mm-dd)" onchange="callActionEnd(this.value);"/>


        <apex:commandlink value="Generate PDF" action="{!exportAsPdf}" target="_blank" styleclass="button" style="margin-right: 25px;font-size: 16px;display: inline-block;text-decoration: none;border-radius: 10px;text-align: center;padding: 15px 32px;color: white;border: none;background: rgba(175, 140, 76, 0.92) !important;margin-bottom: 10px;float:right;"/>
        <apex:commandbutton value="View Records" action="{!Records}" style="margin-left:60px;margin-top: 10px;border-radius: 6px;padding: 9px 12px;margin-top: 10px;font-size: 10px;text-decoration: none;text-align: center;color: white;border: none;background: rgba(175, 140, 76, 0.92) !important;">

         <apex:actionFunction name="callActionStart" rerender="none">
             <apex:param name="startId" value="StartDate" assignTo="{!myLocalStartDate}"  /> 

         </apex:actionFunction>

         <apex:actionFunction name="callActionEnd" rerender="none">
             <apex:param name="EndId" value="EndDate" assignTo="{!myLocalEndDate}"  /> 

         </apex:actionFunction>

          </apex:commandbutton>
            <apex:repeat value="{!accmap}" var="accm" rendered="{!boo}"  >
            <div style="page-break-after: always" class="page-break">

                <div style="padding-top: 25px;font-size: 16px;">
                  <b style="background-color: antiquewhite;">  {!accmap[accm]} (Total Records : {!accsize[accm]}) </b>
               </div><br></br><br></br>
                <table width="100%" border="1" cellspacing="0" cellpadding="5" class="print-friendly">

                    <THEAD> 
                        <tr>
                            <td class="tableHeader"><b>Time Entry Name</b></td>      
                            <td class="tableHeader"><b>Time Entry Date</b></td>
                            <td class="tableHeader"><b>CreatedBy</b></td>
                            <td class="tableHeader"><b>WorkType</b></td>
                            <td class="tableHeader"><b>Total Time</b></td>
                            <td class="tableHeader"><b>Billable Amount</b></td>
                            <td class="tableHeader "><b>Summary Notes</b></td>
                            <td class="tableHeader"><b>Approved</b></td>
                        </tr>
                    </THEAD>
                    <TBODY>
                        <apex:repeat value="{!accidmap[accm]}" var="item" rendered="{!boo}">
                            <tr>
                                <td class="tableContent">{!item.Name}</td>
                                <td class="tableContent">
                                <apex:outputText value="{!item.Time_Entry_Date__c}"></apex:outputText>
                                </td>
                                <td class="tableContent">{!item.CreatedBy.Name}</td>
                                <td class="tableContent">{!item.Worktype__c}</td>
                                <td class="tableContent">{!item.Total_Time__c}</td>
                                <td class="tableContent">{!item.Billable_Amount__c}</td>
                                <td class="tableContent summary-notes">{!item.Time_Entry_Summary__c}</td> 
                                <td class="tableContent">{!item.Approved__c}</td>
                            </tr>
                        </apex:repeat>

                </TBODY>

            </table>
        </div>          
    </apex:repeat>
</apex:form>  

My pdf page looks like..

2

Please try this in your CSS,

page-break-after:always

Source: https://developer.salesforce.com/page/Creating_Professional_PDF_Documents_with_CSS_and_Visualforce

| improve this answer | |

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.