Image not getting displayed in PDF though I tried doing this.Can Anyone Please correct me what is wrong? I tried using it both in div.header and in @page.Both doesn't work fine?
Visualforce:
<apex:page standardController="Opportunity" extensions="testpportunity1" showHeader="false" sidebar="false" docType="html-5.0" applyBodyTag="false" applyHtmlTag="false" renderAs="PDF">
<html lang="en-us" dir="ltr">
<head>
<style type="text/css" media="print">
@page {
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
}
div.header{
position:running(header);
}
}
</style>
</head>
<body>
</body>
</html>
<div class="header">
<img src="{!$Resource.IconSample}" width="25%" />
</div>
<!--<apex:image url="{!$Resource.IconSample}" width="220" height="150" />-->
<br/>
<apex:outputText style="text-align:left; width : 100%;font-size: 16px;" value="Address"></apex:outputText><br/>
<apex:outputText style="text-align:left; width : 100%;font-size: 16px; " value="Street"></apex:outputText><br/>
<apex:outputText style="text-align:left; width : 100%;font-size: 16px; " value="City"></apex:outputText><br/>
<apex:form >
<apex:pageBlock >
<table>
<tr>
<td colspan="4">
</td>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
</table>
<apex:pageblocksection columns="1" title=" Opportunity Information">
<table width="100%" style="font-family: Arial, Helvetica, sans-serif;">
<apex:repeat value="{!oppList}" var="opp">
<tr>
<tr>
<td align="right" style="color: #808080;">
OpportunityOwner
</td>
<td>
{!opp.Owner.Name}
</td>
<td align="right" style="color: #808080;">
OpportunityName
</td>
<td>
{!opp.Name}
</td>
</tr>
<tr>
<td align="right" style="color: #808080; ">
Account Name
</td>
<td>
{!opp.Account.Name}
</td>
<td align="right" style="color: #808080;">
Type
</td>
<td>
{!opp.Type}
</td>
</tr>
<tr>
<td align="right" style="color: #808080; ">
StageManagement
</td>
<td>
{!opp.Stage_Management__c}
</td>
<td align="right" style="color: #808080; ">
Stage
</td>
<td>
{!opp.StageName}
</td>
</tr>
<tr>
<td align="right" style="color: #808080; ">
CloseDate
</td>
<td>
{!opp.CloseDate}
</td>
<td align="right" style="color: #808080; ">
Probability
</td>
<td>
{!opp.Probability}
</td>
</tr>
</tr>
<tr>
<td colspan="4">
</td>
</tr>
</apex:repeat>
</table>
</apex:pageblocksection>
</apex:pageBlock>
<apex:pageBlock >
<apex:pageblocksection columns="1" title=" Product Details">
<table width="800px" height="1200px" >
<apex:variable value="{!1}" var="i"/>
<tr style="background-color:{!IF(mod(i,2)==0, ' #C0C0C0', '#C0C0C0')};">
<th>Product Name</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total Price</th>
</tr>
<apex:variable value="{!i+1}" var="i" />
<apex:variable value="{!1}" var="i"/>
<apex:repeat value="{!prodList }" var="prod">
<tr style="background-color:{!IF(mod(i,2)==0, ' #C0C0C0', '#C0C0C0')};">
<td>{!prod.pricebookentry.product2.name}</td>
<td> {!prod.quantity}</td>
<td> {!prod.quantity}</td>
<td> {!prod.TotalPrice}</td>
</tr>
<apex:variable value="{!i+1}" var="i" />
</apex:repeat>
</table>
</apex:pageblocksection>
</apex:pageBlock>
<style>
</style>
</apex:form>
<apex:outputText >xyz</apex:outputText><br/><br/>
<apex:outputText value="order:" style="text-align:center; width : 100%;font-size: 16px; font-weight: bold ; color :#000000"> </apex:outputText> <apex:outputText >Salsforce</apex:outputText><br/>
<apex:outputText > Visualforce</apex:outputText><br/>
<br/><apex:outputText style="text-align:left;font-weight: bold;" value="Best Regards,"></apex:outputText><br/>
<br/><div style="text-align:center;font-size: 15px;">
<apex:outputText style="text-align:center;font-weight:bold;" value="Thank you"></apex:outputText></div>
<br/><br/><div style="text-align:center;font-size: 25px;">
<apex:outputText style="text-align:center;font-weight:bold;" value="SALESFORCE"></apex:outputText></div>
<p class="par">
This is Opportunity page.
</p>
</apex:page>
Controller:
public class testpportunity1{
public List <Opportunity> oppList{get;set;}
public List <OpportunityLineItem> prodList{get;set;}
public user cuser{get;set;}
public testpportunity1(ApexPages.StandardController controller) {
oppList = new List <Opportunity>();
oppList = [SELECT name, owner.name,Account.Name, stagename, amount,ExpectedRevenue,NextStep,LeadSource,Probability, CloseDate,Type,Stage_Management__c
FROM Opportunity
WHERE id = '789456123'];
System.debug('opportunity list------->'+oppList);
prodList =new List <OpportunityLineItem>();
prodList = [SELECT PricebookEntry.Product2.Name, quantity, unitprice, totalprice
FROM OpportunityLineItem
WHERE OpportunityID='789456123'];
cuser=[select id,Username,Signature__c from user where id=:UserInfo.getUserId()];
System.debug('User list------->'+cuser);
}
}
Best Answer
In your visualforce page declaration you have the following:
html-5.0 is not supported when rendering PDF's in Salesforce. Only html 4.2 is supported and CSS 2.1.
Your CSS begins with the following:
Off-hand, I don't recall that type of syntax being supported in HTML 4.2. You may need to change that and use a different syntax as that looks like CSS 3 to to me.
With PDFs it's best to use tables if you want them to render consistently and successfully.
Edit
In response to comments...
I looked in my code repository and here's an example of the proper way to add an image to a header:
in style classes, then to your page add:
Edit 2
Since your pages are wrapping and the number pagination in the footers is working as written, I think you need to do the following. Remove the div that contains your current header. Then, adjust your CSS to contain the image so it can also repeat at the top of each page. You may need to tweak this, but the CSS should look something like what's below. I'll add that if you encounter issues, one thing which might help would be putting the CSS in an external resource so you can reference the image's relative location to the external resource.
Note: I'm not positive the above syntax for the header content is correct. You may need to play with it to get it correct, but I do believe content is what you want to use. You could try replacing content with something like the following if it doesn't:
See the CSS 2.1 reference docs for more.
With all the above having been said, since you're actually paginating Tables, I strongly suspect the most reliable way that you're going to get this to work is by using some of the flying saucer Render Engine CSS for pagination that's related to Tables. Doing that would require you to encapsulate your entire page in a Table and then use before table page break and after table page break attributes in your CSS.