2

I have a visualforce page and visualforce component. The visualforce page simply calls the visualforce component:

<apex:page renderAs="pdf" applyBodyTag="false">
   <c:Component />
</apex:page>

Note that the names of the pages and components are changed for security reasons.

The component itself is more complicated. It has a lot of different styling, including some @page styling and body styling. I'm not going to paste the code of the page due to its complexity and the need for privacy... but here is the snippit of the @page styling:

@page {
    margin-top: 0.25in;
    margin-left: 0.25in;
    margin-right: 0.25in;
    margin-bottom: 0.5in;

    @bottom-center {
        content: element(footer);
    }
}

The reason I am using the component is because I need the same pdf that is generated from the page to be made when I am including it on an email attachment:

<messaging:attachment renderAs="pdf" filename="{!relatedTo.Name}">    
    <c:Component />
</messaging:attachment>

The issue here is that the styling changes dramatically when viewed from the page and when viewed from the message attachment. My hypothesis is that this is due to the lack of the applyBodyTag="false" attribute, which I cannot add to the messaging:attachment.

Question:

So are there any workarounds for the applyBodyTag="false" attribute, with the amount of information I've provided? Is there something I could do on the component to remove the applyBodyTag="false" attribute from the page but still have the same formatting? Or is there some way I can simulate the applyBodyTag="false" on the messaging:attachment?

If worse comes to worst could I somehow call the visualforce page from the messaging:attachment?

Thank you for all of your help!

2

Generally, when I'm doing that I leave the styling in the Visualforce page and the Email Template and just have the content in the Component

<apex:page renderAs="pdf" showHeader="false" sidebar="false" applyHtmlTag="false" >

    <head>
        <style type="text/css">
            @page {
                size:8.5in 11in; 
                margin-top: 10px;
                margin-bottom: 1in;
                @bottom-center { content: element(footer_center); }
                @bottom-left { content: element(footer_left); }
            }           
        </style>
    </head>

    <c:Component/>

</apex:page>

Email Template:

<messaging:attachment renderAs="pdf" filename="{!relatedTo.Name}">    
    <head>
        <style type="text/css">
            @page {
                size:8.5in 11in; 
                margin-top: 10px;
                margin-bottom: 1in;
                @bottom-center { content: element(footer_center); }
                @bottom-left { content: element(footer_left); }
            }           
        </style>
    </head>
    <c:Component />
</messaging:attachment>

If you don't want applyHtmlTag on your page, you can set your page to an older API version (sorry, can't remember when exactly - but something like 26) prior to it being a feature.

I've never successfully managed to get the styling in the Component itself, but then again I've never tried too hard since this works for me.

One thing that springs to mind is that your Component is going to be wrapped in a span (or div, can't remember) if you haven't specified layout="none" on the Component declaration which may be messing with the formatting, e.g.

<apex:component layout="none"> <!-- prevents element being wrapped by VF -->
</apex:component>
  • This worked beautifully, and was super easy to integrate. Thank you for all of your help! – Konnor McDowell Nov 5 '16 at 16:32
  • You're welcome @KonnorMcDowell! – Phil Hawthorn Nov 5 '16 at 17:26

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.