function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jim ThompsonJim Thompson 

How can I preview a PDF attachment to an Email Template from Visualforce?

I have a feature we are building which allows our users to input some elements onto a custom object which will be used within a Visualforce component to generate a PDF attachment to an email which comes from a Visualforce HTML email template: 
<messaging:emailTemplate subject="National Account Program v9" recipientType="User" relatedToType="gvp__National_Email__c">
    <messaging:htmlEmailBody >
        <apex:image url="https://c.na7.content.force.com/servlet/servlet.ImageServer?id=015A0000000kVmM&oid=00DA0000000KItS&lastMod=1297286110000"/>
        <br/>
        <p>Here is a test PDF of the new National Account Program Announcement (should be attached)</p>
    </messaging:htmlEmailBody>
    <messaging:attachment renderas="pdf" filename="{!relatedTo.Name}-Authorizations-9.pdf">
    <c:NAProgramEmail />
    </messaging:attachment>
</messaging:emailTemplate>
I can use the "Send Test and Verify Merge Fields" button on the template to send myself an email, and the attachment looks pretty much the way I want it to, with CSS, fullscreen background, etc. This is what it looks like:

User-added image

However I also want my users to be able to "Preview" the PDF while they are inputting the elements. To test this I made a simple VF page that embeds the same Visualforce component but as you will see below, it looks entirely different. Does this not use the same PDF renderer? Are there tricks to get the same VF component to look the same in both scenarios? 
<apex:page renderAs="pdf">
    <c:NAProgramEmail />
</apex:page>
And when I view this VF page it looks like this:
User-added image

Here is a snippet of the Visualforce component, which contains both <style> parameters and inline styles: 
.thumbnail {
        width: 180px;
        border-radius: 20px;
        border:1px solid #333;
        height: auto;
        margin: 0 0 20px 20px;
    }
    .thumbnail_photo {
        float:none;
    }
    
    .pad_content {
        padding:0 20px;
    }

</style>
</head>
<body>
<div class="container">
    <header>
        <div class="primary_header">
          <!-- GV CONFIG: Header Image $Resource and ALT tag variables below -->
          <img style="width:100%" src="{!$Resource.GVNAHeader}" alt="Organization Logo"/>
        </div>
    </header>
    <div class="row">
        <div class="column_half left_half" style="height:525px">
            <div class="pad_content">
            <!-- GV CONFIG: Org Company Name -->
            <h2 style="font-family:Arial Unicode MS; font-weight:700; font-size:24px">{!$Organization.Name}</h2>

 
Jim ThompsonJim Thompson
I knew as soon as I posted this, I would need to move even more CSS into the HTML tags (like you typically do for HTML emails). My first test, just adding the style parameters to <body> seems to be heading in the right direction. I really wish I knew why renderAs="pdf" behaves differently in these two scenarios.