2

I'm trying to have both portrait (page one) and landscape (page two) in a visualforce page which is 'render as PDF'. I have tried various options but cannot get it to work, I can only get all landscape or all portrait, here is the code, please help!      

<apex:page Controller="RAMS_Controller" showHeader="false" renderas="pdf" applyBodyTag="false" applyHtmlTag="false">
    <html>
        <head>
            <style>
                @page{
                    size: A4 landscape;
                }
            </style>
    <div style="text-align:center;">
        <p style="text-align:center;font-size: 25px"><font face="Arial">Page One</font></p>
    </div>

    <div style="text-align:center;">
    
        <p style="text-align:center;font-size: 25px"><font face="Arial">Page Two</font></p>
    </div>

There is closing tags in the above code, but I can't get them to show on the page!

1 Answer 1

2

Per this question, you can alias different sizes (@page aliasName):

@page land { size:landscape; }
@page port { size:portrait; }

Which you can then apply via the page CSS attribute:

.landscapePage { page:land; }
.portraitPage { page:port; }

Which in turn renders the pages as you desire:

<div class="portraitPage">
    <p>Some page content in portrait</p>
</div>
<div class="landscapePage">
    <p>Some page content in landscape</p>
</div>
1
  • 1
    This is a bit easier than what I worked out, using one @page to set the overall orientation, then using @page :first to override that orientation for just the first page. More flexible too. Also confirmed that both approaches do indeed work on Salesforce.
    – Derek F
    Jun 7 at 19:33

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.