You need to sign in to do that
Don't have an account?
raji devi 1
Page Break when visual force PDF is rendered dynamically content
Hi All,
I am generating a pdf .
the content on the pdf is dynamic images of different products.In my code i have two tables.
i want to fit the content of one page , but in my pdf content is going to other page .My all product images are >=150px
if the product information is not fit into one page i want to move to other page , which should happen when page rendered .
I used "page-break-after:always;" but it is not working & added "fs-table-paginate: paginate;" if i used this i am getting blackblocks end of the pages so i removed. pls find attached my code & help me to over come this.
<apex:page standardcontroller="Quote" sidebar="false" showHeader="false" renderAs="pdf" applyBodyTag="false" standardStylesheets="true">
<apex:form >
<head>
<style type="text/css" >
@page {
/* Landscape orientation */
/* size:landscape; */
/* Portrait orientation */
size:portrait;
margin:190px 50px 60px 50px;
background:#fff;
@top-center {
content: element(header);
}
@bottom-left {
content: element(footer);
}
}
div.footer {
display: block;
padding: 0px;
position: running(footer);
background: #fff;
height: 75px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 10px 0 0 0;
}
div.header {
display: block;
position: running(header);
background: #fff;
height: 190px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
div.content {
background: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 50%;
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
.allFontsize {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
"
}
</style>
<!------------added by raji--------------------
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
.p {
page-break-inside: avoid;
}
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
</style>
<style type="text/css">
@media print {
p {
page-break-inside: avoid;
}
}
</style>------------------------------------->
</head>
<div class="header">
<apex:image value="{!$Resource.askagroupHeader}" height="186" width="700"/>
</div>
<div class="footer">
<apex:image value="{!$Resource.askagroupFooter}" height="46" width="700"/>
</div>
<div class="content" >
<!-- Quote Format Start -->
<!-- Quote Format End -->
<!-- Industrial Quote Format Start-->
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:12px;">
<tr>
<td align="center" valign="middle"><h2><u>QUOTATION</u></h2></td>
</tr>
<tr>
<td height="25" align="left" valign="middle">Ref: {!Quote.QuoteNumber} </td>
</tr>
<tr>
<td height="25" align="left" valign="middle">Dt.:
<apex:outputText value="{0,date,dd'/'MM'/'yyyy}">
<apex:param value="{!Quote.CreatedDate}"/>
</apex:outputText></td>
</tr>
<tr>
<td height="30" align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle"><u>Company Name & Address</u></td>
</tr>
<tr>
<td align="left" valign="middle">Address Line1: {!Quote.BillingName} </td>
</tr>
<tr>
<td align="left" valign="middle">Address Line2: {!Quote.BillingStreet} </td>
</tr>
<tr>
<td align="left" valign="middle">Address Line3: {!Quote.BillingCity} </td>
</tr>
<tr>
<td align="left" valign="middle">Contact Ph.: {!Quote.Phone} </td>
</tr>
<tr>
<td align="left" valign="middle">Contact Mob.: {!Quote.Mobile__c} </td>
</tr>
<tr>
<td align="left" valign="middle">Email: {!Quote.Email} </td>
</tr>
<tr>
<td height="30" align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">Kind Attn.: {!Quote.Contact.Name} </td>
</tr>
<tr>
<td align="left" valign="middle">Ref. No.: {!Quote.Ref_No__c} </td>
</tr>
<tr>
<td align="left" valign="middle">Sub.: <strong>{!Quote.Name}</strong></td>
</tr>
<tr>
<td height="25" align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">Dear Sir/Madam,</td>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">We thankfully acknowledge receipt of your valued enquiry and as accordingly we are pleased to submit our formal Quotation with reference to your RFQ as under:-</td>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle"><table width="700" border="1" cellspacing="0" cellpadding="0" bgcolor="#000" style="min-width:700px;max-width:700px; ">
<tr>
<th align="center" valign="middle" bgcolor="#FFFFFF" height="30">Line Item</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Product Description</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Part Code</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">UOM</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Qty</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">MOQ</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Price</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Value</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Image</th>
</tr>
<apex:repeat var="lineItemObj" value="{!Quote.QuoteLineItems}">
<tr >
<td align="left" valign="middle" bgcolor="#FFFFFF" >{!lineItemObj.Product2.Name}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" ><apex:outputField value="{!lineItemObj.Product2.Description}" styleClass="p"/></td>
<td align="left" valign="middle" bgcolor="#FFFFFF">{!lineItemObj.Product2.ProductCode}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" >{!lineItemObj.UOM__c}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" >{!lineItemObj.Quantity}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" >{!lineItemObj.MOQ__c}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF">{!lineItemObj.ListPrice}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" >{!lineItemObj.Quote.Grand_Total__c}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width="180"><apex:outputField value="{!lineItemObj.Product2.Image__c}" style="width:200px;pagreak-after:always;" /></td>
</tr>
</apex:repeat>
</table>
<br clear="right" />
</td>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<th align="left" valign="middle"><em>Product Datasheet attached.</em></th>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle"><apex:outputPanel id="termsConds" rendered="{!Quote.Terms_Conditions__c}" >
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<th align="left" valign="middle" styleClass="allFontsize"><u><em>Please refer to our terms and conditions next page…</em></u></th>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<th align="left" valign="middle" styleClass="allFontsize"><u>Terms & conditions</u></th>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle" styleClass="allFontsize"><table width="100%" border="1" cellspacing="1" cellpadding="5" bgcolor="#000000" >
<tr>
<td width="6%" align="center" valign="middle" bgcolor="#FFFFFF">1.</td>
<td width="18%" align="left" valign="top" bgcolor="#FFFFFF">Prices</td>
<td width="76%" align="left" valign="top" bgcolor="#FFFFFF"> {!Quote.Price_Term__c} <br/></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">2.</td>
<td align="left" valign="top" bgcolor="#FFFFFF">P&F Charges</td>
<td align="left" valign="top" bgcolor="#FFFFFF">Extra @ 2%</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">3.</td>
<td align="left" valign="top" bgcolor="#FFFFFF">Excise Duty</td>
<td align="left" valign="top" bgcolor="#FFFFFF">Not Applicable</td>
</tr>
<tr>
Thanks,
Raji
I am generating a pdf .
the content on the pdf is dynamic images of different products.In my code i have two tables.
i want to fit the content of one page , but in my pdf content is going to other page .My all product images are >=150px
if the product information is not fit into one page i want to move to other page , which should happen when page rendered .
I used "page-break-after:always;" but it is not working & added "fs-table-paginate: paginate;" if i used this i am getting blackblocks end of the pages so i removed. pls find attached my code & help me to over come this.
<apex:page standardcontroller="Quote" sidebar="false" showHeader="false" renderAs="pdf" applyBodyTag="false" standardStylesheets="true">
<apex:form >
<head>
<style type="text/css" >
@page {
/* Landscape orientation */
/* size:landscape; */
/* Portrait orientation */
size:portrait;
margin:190px 50px 60px 50px;
background:#fff;
@top-center {
content: element(header);
}
@bottom-left {
content: element(footer);
}
}
div.footer {
display: block;
padding: 0px;
position: running(footer);
background: #fff;
height: 75px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 10px 0 0 0;
}
div.header {
display: block;
position: running(header);
background: #fff;
height: 190px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
div.content {
background: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 50%;
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
.allFontsize {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
"
}
</style>
<!------------added by raji--------------------
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
.p {
page-break-inside: avoid;
}
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
</style>
<style type="text/css">
@media print {
p {
page-break-inside: avoid;
}
}
</style>------------------------------------->
</head>
<div class="header">
<apex:image value="{!$Resource.askagroupHeader}" height="186" width="700"/>
</div>
<div class="footer">
<apex:image value="{!$Resource.askagroupFooter}" height="46" width="700"/>
</div>
<div class="content" >
<!-- Quote Format Start -->
<!-- Quote Format End -->
<!-- Industrial Quote Format Start-->
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" style="font-family:Arial, Helvetica, sans-serif;font-size:12px;">
<tr>
<td align="center" valign="middle"><h2><u>QUOTATION</u></h2></td>
</tr>
<tr>
<td height="25" align="left" valign="middle">Ref: {!Quote.QuoteNumber} </td>
</tr>
<tr>
<td height="25" align="left" valign="middle">Dt.:
<apex:outputText value="{0,date,dd'/'MM'/'yyyy}">
<apex:param value="{!Quote.CreatedDate}"/>
</apex:outputText></td>
</tr>
<tr>
<td height="30" align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle"><u>Company Name & Address</u></td>
</tr>
<tr>
<td align="left" valign="middle">Address Line1: {!Quote.BillingName} </td>
</tr>
<tr>
<td align="left" valign="middle">Address Line2: {!Quote.BillingStreet} </td>
</tr>
<tr>
<td align="left" valign="middle">Address Line3: {!Quote.BillingCity} </td>
</tr>
<tr>
<td align="left" valign="middle">Contact Ph.: {!Quote.Phone} </td>
</tr>
<tr>
<td align="left" valign="middle">Contact Mob.: {!Quote.Mobile__c} </td>
</tr>
<tr>
<td align="left" valign="middle">Email: {!Quote.Email} </td>
</tr>
<tr>
<td height="30" align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">Kind Attn.: {!Quote.Contact.Name} </td>
</tr>
<tr>
<td align="left" valign="middle">Ref. No.: {!Quote.Ref_No__c} </td>
</tr>
<tr>
<td align="left" valign="middle">Sub.: <strong>{!Quote.Name}</strong></td>
</tr>
<tr>
<td height="25" align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">Dear Sir/Madam,</td>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle">We thankfully acknowledge receipt of your valued enquiry and as accordingly we are pleased to submit our formal Quotation with reference to your RFQ as under:-</td>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle"><table width="700" border="1" cellspacing="0" cellpadding="0" bgcolor="#000" style="min-width:700px;max-width:700px; ">
<tr>
<th align="center" valign="middle" bgcolor="#FFFFFF" height="30">Line Item</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Product Description</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Part Code</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">UOM</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Qty</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">MOQ</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Price</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Value</th>
<th align="center" valign="middle" bgcolor="#FFFFFF">Image</th>
</tr>
<apex:repeat var="lineItemObj" value="{!Quote.QuoteLineItems}">
<tr >
<td align="left" valign="middle" bgcolor="#FFFFFF" >{!lineItemObj.Product2.Name}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" ><apex:outputField value="{!lineItemObj.Product2.Description}" styleClass="p"/></td>
<td align="left" valign="middle" bgcolor="#FFFFFF">{!lineItemObj.Product2.ProductCode}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" >{!lineItemObj.UOM__c}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" >{!lineItemObj.Quantity}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" >{!lineItemObj.MOQ__c}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF">{!lineItemObj.ListPrice}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" >{!lineItemObj.Quote.Grand_Total__c}</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width="180"><apex:outputField value="{!lineItemObj.Product2.Image__c}" style="width:200px;pagreak-after:always;" /></td>
</tr>
</apex:repeat>
</table>
<br clear="right" />
</td>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<th align="left" valign="middle"><em>Product Datasheet attached.</em></th>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle"><apex:outputPanel id="termsConds" rendered="{!Quote.Terms_Conditions__c}" >
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<th align="left" valign="middle" styleClass="allFontsize"><u><em>Please refer to our terms and conditions next page…</em></u></th>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<th align="left" valign="middle" styleClass="allFontsize"><u>Terms & conditions</u></th>
</tr>
<tr>
<td align="left" valign="middle"> </td>
</tr>
<tr>
<td align="left" valign="middle" styleClass="allFontsize"><table width="100%" border="1" cellspacing="1" cellpadding="5" bgcolor="#000000" >
<tr>
<td width="6%" align="center" valign="middle" bgcolor="#FFFFFF">1.</td>
<td width="18%" align="left" valign="top" bgcolor="#FFFFFF">Prices</td>
<td width="76%" align="left" valign="top" bgcolor="#FFFFFF"> {!Quote.Price_Term__c} <br/></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">2.</td>
<td align="left" valign="top" bgcolor="#FFFFFF">P&F Charges</td>
<td align="left" valign="top" bgcolor="#FFFFFF">Extra @ 2%</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF">3.</td>
<td align="left" valign="top" bgcolor="#FFFFFF">Excise Duty</td>
<td align="left" valign="top" bgcolor="#FFFFFF">Not Applicable</td>
</tr>
<tr>
Thanks,
Raji
VineetKumar
Usually page rendered as PDF is not actually what it looks as a normal VF page, you will have to put PDF specific styling and CSS, to order and fix the table and it's content.