1

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">
                                &nbsp;
                            </td>
                            </tr>
                            <tr>
                            <td colspan="4">
                                &nbsp;
                            </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">
                                &nbsp;
                            </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);

    }

  }
Improve this question

2 Answers 2

Reset to default
2

In your visualforce page declaration you have the following:

<apex:page standardController="Opportunity" showHeader="false" sidebar="false"  docType="html-5.0" applyBodyTag="false" applyHtmlTag="false" renderAs="PDF">

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:

div.header {
            background: url("{!$Resource.IconAji}") no-repeat center center;

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:

@top-center {
        content : element(header);
     }

div.header {
    position : running(header) ;
}

in style classes, then to your page add: 

<div class="header">
    <apex:image value="Image URL" />
</div>

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.

@top-center {
        content : element(header);
     }

header {
    position : running(header);
    content: img(src="{!$Resource.IconSample}", width="25%");
}

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:

    background-image: url(src="{!$Resource.IconSample}", width="25%");
    background-attachment: fixed;
    background-repeat: no-repeat;

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.

Improve this answer
12
  • Thank you for responding.I have changed the version to 4.2 and the following syntax.But it doesn't work fine.Image is not getting displayed.
    – jayasuriya janarthan
    Commented May 30, 2018 at 14:19
  • I tried it.Image is not getting displayed.It gets displayed only with this code:<apex:image url="{!$Resource.IconAji}" width="220" height="150" />.But I want it to be displayed in every page of the PDF.So this code won't work out for this.
    – jayasuriya janarthan
    Commented May 31, 2018 at 10:44
  • Thank you.With your code,Image gets displayed,but only in the first page not in every page.
    – jayasuriya janarthan
    Commented May 31, 2018 at 10:49
  • Try enclosing your css in @media print tags to see if that doesn't resolve your issue. I suspect it doesn't know there's any pagination going on.
    – crmprogdev
    Commented May 31, 2018 at 12:53
  • It is not working.Can you help me with this?
    – jayasuriya janarthan
    Commented Jun 6, 2018 at 12:32
0

I used something like this to show images on PDF page:

<p><apex:image value="{!URLFOR($Resource.Styles, '/Images/CompanyLogo.png')}" style="display: block; margin-left: auto; margin-right: auto;" width="250" height="80"/></p>

style tag doesn't work well with PDF pages, I'd suggest to use inline styling instead.

Improve this answer
1
  • Thank You.Yeah even I have used the same but I need the header image to be visible in every other page of the PDF.
    – jayasuriya janarthan
    Commented May 30, 2018 at 14:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .