Apex Code Development You need to sign in to do that
Don't have an account?
Jskin Page breaks in PDF
Apologies I know this has been covered several times in the forum but I have been trying out the code/suggestions for the other posts but can't seem to apply it to my situation. I am trying render a pdf attachement to an email to show a list on one page and an image on the next. Both pages have a background image from Static resources on them. I have managed to get the PDF to split into 2 pages but the list and image appear together on both pages. Any suggestions on how I can alter my following code to fix this? Many Thanks.
<messaging:attachment renderAs="pdf" filename="Venue Specifications">
<html><head>
<style type="text/css" media="print">
@page{
@bottom-left {
content: element(footer);
}
size: A4 portrait;
margin-top:0cm;
margin-left:0cm;
margin-right:0cm;
margin-bottom:0cm;
}
p
{
color:#666666;
font-family:"Arial Unicode MS";
font-size:10pt;
}
h3
{
color:#E52013;
font-family:"Arial Unicode MS";
font-size:11pt;
font-style:bold;
}
footer
{
color:#A9A9A9;
font-family:"Arial Unicode MS";
font-size:7.5pt;
}
</style>
</head>
<img src="{!URLFOR($Resource.Document_New)}" style="position: fixed; left: 0cm; top:0cm; z-index:-1" width="21cm" height="29.7"/>
<table style="position: fixed; left: 2.54cm; top:4.25cm; width:16.02cm; height:21.2cm;" border="0.1">
<tr><td>
<b><h3>VENUE SPECIFICATIONS:</h3></b>
<ol>
<li><p>Numbered list.</p></li>
<li>....</li>
</ol>
<p>If you have any difficulties in meeting these requirements please contact us as soon as possible. </p>
</td></tr></table>
<footer>
<table width="15.92cm" valign="top" style="position: fixed; left: 2.54cm; top: 27.1cm;" >
<colgroup>
<col span="4" width="3.98cm" />
</colgroup>
<tr valign="top">
<td>Office Address<br/>Street<br/></td>
<td></td>
<td></td>
</tr>
</table>
</footer>
<div style="page-break-before:always">
<img src="{!URLFOR($Resource.Document_New)}" style="position: fixed; left: 0cm; top:0cm; z-index:-1" width="21cm" height="29.7"/>
<apex:image style="position: fixed; left: 4cm; top:8cm;" url="https://cs7.salesforce.com/servlet/servlet.ImageServer?id=........"/>
</div>
</html>
</messaging:attachment>
You will also have to remove the style for fixed position from first table. This is causing the issue. I removed that and it worked well. :)
All Answers
I have faced this issue too once. You need to place your page break and image in a cell of the table. Then it will work properly. So something like this:
<table border="0" cellpadding="0" cellspacing="0" align="left">
<tr><td align="left">
<div style="page-break-before:always">
<img src="{!URLFOR($Resource.Document_New)}" style="position: fixed; left: 0cm; top:0cm; z-index:-1" width="21cm" height="29.7"/>
<apex:image style="position: fixed; left: 4cm; top:8cm;" url="https://cs7.salesforce.com/servlet/servlet.ImageServer?id=........"/>
</div>
</td></tr>
</table>
Hope this helps.
Thanks Kamal,
I updated as suggested but it showed no change upon opening the pdf. I also removed the style position for the image as follows and now I get the image on one page only but the numbered list still appears on both. Any further suggestions? Many Thanks.
<table border="0" cellpadding="0" cellspacing="0" align="left">
<tr><td align="left">
<div style="page-break-before:always">
<img src="{!URLFOR($Resource.Document_New)}" style="position: fixed; left: 0cm; top:0cm; z-index:-1" width="21cm" height="29.7"/>
<apex:image url="https://cs7.salesforce.com/servlet/servlet.ImageServer?id=........"/>
</div>
</td></tr>
</table>
You will also have to remove the style for fixed position from first table. This is causing the issue. I removed that and it worked well. :)
Thanks again - I changed to position to relative so the list would appear on the correct part of the page and now the list is appearing on the first page and the image on the second page as expected.