2

I am looking to embed an image in a PDF rendered in Visualforce. The goal is to have the PDF look like it's on a letter head. I've tried a number of different approaches to this but can't seem to find the right way to do it that properly renders the image.

My current code for the header is as follows:

    <apex:page standardController="Opportunity" renderAs="pdf" applyBodyTag="false" standardStylesheets="false">

    <head>
        <style>
            body { font-family: 'Arial Unicode MS'; padding: 0px;}
            .companyName { font: bold 25px; color: #505053; }
            footer {font: normal; font-size: 12px; color: #505053; }
            h1 {font: normal; font-size: 30px; color: #505053;}
            h2 {font: normal; font-size: 25px; color: #5F5F62;}
            .colstyle {width: 75%}
            .colstyle2 {width: 25%}
            .footer {padding: 0px;position:fixed;bottom:5px; width: 100%}
            .header {position: running(header);background-image: url("{!$Resource.PDF_Header}"); background-position: center top; background-repeat: no-repeat; padding: 0px; width:100%;}
            .line {color: #E72683;}
            .footerline {color: black;}
            disclaimer {font-style: italic; font-size: 12px; color: #505053; }
            @Page{
              size: 8.50in 11.00in;
              margin-top: 0in;
             @top-left{
               content: element(header);
               }
             #header{
              padding: 0px;
              position: running(header);
              background-color: blue;
             }
        </style>
    </head>

 <body> 
     <div>
       <apex:image id="header" value="{!$Resource.PDF_Header}" height="150" width="100%" style="vertical-align:left" />
       <center>
        <h1> Integrated Payment Solution </h1>
        <h2> Savings Estimate </h2> 
       </center>
     </div>

<!-- ... Rest of PDF... -->

As you can see by my styling, I've tried a few different approaches and am currently using the apex:image function to at least get the image rendered. However, with this approach, it's not a true header but rather rendered in the first line of the PDF.

Any guidance is appreciated!

Improve this question

3 Answers 3

Reset to default
2

Was able to successfully render an image in the header with the following:

  <apex:page standardController="Opportunity" renderAs="pdf" applyBodyTag="false" standardStylesheets="false">

    <head>
        <style type="text/css" media="print">
             @page {
                     margin-bottom: 1in;
                     margin-top: 1in;
                      @top-center {
                          content: element(header);
                          }
                      @bottom-left {
                          content: element(footer);
                           }
                    }
                      div.header {
                        padding: 0px;
                        position: running(header);
                        background-color: #f1f3f2;
                        }
                      div.footer {
                        display: block;
                        position: running(footer);
                        }

            body { font-family: 'Arial Unicode MS'; padding: 0px;}
            .companyName { font: bold 25px; color: #505053; }
            footer {font: normal; font-size: 12px; color: #505053; }
            h1 {font: normal; font-size: 30px; color: #505053;}
            h2 {font: normal; font-size: 25px; color: #5F5F62;}
            .colstyle {width: 75%}
            .colstyle2 {width: 25%}
            .line {color: #E72683;}
            .footerline {color: black;}
            disclaimer {font-style: italic; font-size: 12px; color: #505053; }
        </style>
    </head>

 <div class="header">
 <img src="{!$Resource.PDF_Header}" width="300" height="100"/>
 </div> 

 <body>

<!-- rest of pdf code-->
Improve this answer
1

You have placed the image inside <body>. Can you put the image just after <apex:page>. It should work.

Improve this answer
1
  • 1
    Thanks. When I do this though, I lose all of my formatting on the PDF.
    – Erik Eitel
    Jun 27, 2016 at 16:24
1

first thing i see is that your style is missing the 'type' classification and media 'attribute'. You need to set the header/footer based on div.header rather than #header since header and footer is always 'one' in a page and hence defining by ID will not be set correctly.

Here is a sample that you uses Headers/footers consistently.

Improve this answer
1
  • Thanks. Should the header tag live within the body in this instance?
    – Erik Eitel
    Jun 27, 2016 at 16:50

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.