3

I am trying to build a pdf page where the header/logo includes an image. I have tried the following but no luck yet:

    <apex:page standardController="proposal__c" extensions="testGenerateQuotePdf" showHeader="false" renderAs="pdf" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false">
    <html>
        <head>
            <style>
                @page {
                    size: A4;
                    margin-top: 20mm;
                    @bottom-center {
                        content: counter(page);
                        }
                    @top-right {
                        content: {!$Resource.TestProposalHeader};
                        }
                    @bottom{
                        margin-top: 10mm;
                    }
                    @left-top{
                        content: "Quote";
                    }
                }
                .contactDetails{
                }
                .page-break {
                    display:block;
                    page-break-after:always;
                }
                .outBorder {
                    border-style: groove;
                }
                .inBorder{
                    border-style: ridge;
                }
                .generatedDate{
                    font: 8px;
                }
                body{
                    font-size: 1em;
                }
            </style>
        </head>
        <body>
            <div class="generatedDate" style="float:right; position:relative;">
                <apex:outputText value="{0, date, MMMM d','  yyyy}" style="color:blue;">
                    <apex:param value="{!NOW()}"/>
                </apex:outputText>
                </div><br></br>
            <apex:image id="theImage" value="{!$Resource.spotQuoteBody}" width="700" height="200"/>
        </body>
    </div>
</html>

Any help is much appreciated. thanks

Improve this question

1 Answer 1

Reset to default
5

have u tried with @top-center ? like :

@top-center {
    content: "Sample Header Test";
    background-image: url('{!$Resource.YOUR_IMAGE}');  
}

You can use other way for reducing image size like :

@page {
      margin-top: 1.5in;
      @top-center {
        content: element(header);
      }
    }
    div.header {
      position: running(header);
    }
 <div class="header">
    <center><img src="{!$Resource.YOUR_IMAGE}" width="25%"/></center>
  </div>

Thanx !!!

Improve this answer
8
  • thx but this creates multiple headers for some reason..
    – saint
    Jun 27, 2016 at 9:48
  • okie ! you mean after adding @top-center this is creating multiple headers ri8 ?
    – Arjun Khatri
    Jun 27, 2016 at 9:50
  • Yes. the header should only show SNV but shows SNV SNV SNV SNV SNV on all the headers of all pages. not quite sure why?
    – saint
    Jun 27, 2016 at 9:53
  • is there a way to reduce the size of the image inside the @top-center {} tag?
    – saint
    Jun 27, 2016 at 9:59
  • include this 2 tags in apex:page <apex:page standardController="proposal__c" extensions="testGenerateQuotePdf" renderAs="pdf" applyBodyTag="false"> and remove all other tags from apex:page.
    – Arjun Khatri
    Jun 27, 2016 at 10:00

You must log in to answer this question.

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