6

I've done it before but recently it does not appear to be working. Tried changing the api to an older version, still nothing. Not sure what else to try. i've tried multiple 'solutions' from other related posts, but they all seem to be from 2015 and earlier, back when those solutions worked for me. Anyone know what has been changed and how to accomplish this currently? The most recent post I found suggested this:

@page {  
                 size: A4 landscape; /* ISO/JIS A4 (210mm�297mm) */  
                 margin: 5mm; 
              } 
        @page:first {  
                 size: A4 landscape; /* ISO/JIS A4 (210mm�297mm) */ 
                 margin: 5mm; 
                 margin-top: 3mm; 

              }  

But that doesn't work either. here is a snippet of what I have now:

<apex:page StandardController="Opportunity" Extensions="ProjectInformationExt" renderas="pdf">

<apex:includeScript value="{!$Resource.JqueryMin}" />
<apex:includeScript value="{!$Resource.Project_Info_Scripts}" />
<apex:includeScript value="{!$Resource.ClearanceScripts}" />
<apex:stylesheet value="{!$Resource.ClearanceStyle}" />
<apex:stylesheet value="{!$Resource.DipStyle}" />
<apex:stylesheet value="{!$Resource.RFC_ViewAsReport}" />
<head>
<Style>
    @page {  
             size: A4 landscape; /* ISO/JIS A4 (210mm�297mm) */  
             margin: 5mm; 
          } 
    @page:first {  
             size: A4 landscape; /* ISO/JIS A4 (210mm�297mm) */ 
             margin: 5mm; 
             margin-top: 3mm; 

          }  
    .label{
        font-size: 13px;
        color: #000;
    }
</Style></head>
<span class="hidden" id="pid">{!project.id} </span> 
<apex:image url="{!$Resource.OPICLogo}" width="50" height="50"
    style="float: left;" />
<h2 class="text-left" style="float: left; color: black;">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <apex:outputField value="{!project.name}" />
</h2>
<br style="clear: both;" />
<br style="clear: both;" />

<div class="bold text-right" style="float: right;">
    <table>
        <tr>
            <td class="nopad">Report Date:&nbsp;<apex:outputText id="outDate" value="{!currentDate}" />
            </td>
        </tr>
    </table>
</div>
<!--<apex:outputText value="{!findip.id}"/>-->
<div class="bold text-right" style="clear: both; float: right;">

    Project Information for&nbsp;
    <apex:outputField value="{!project.ProjectID__c}" />
    <br />
</div>
<br/>

3 Answers 3

10

You have to use applyBodyTag="false" attribute in <apex:page tag as explained in Visualforce Developer Guide to render the PDF properly. I checked with the below code and I am able to render the PDF in landscape mode.

<apex:page standardController="Account" renderAs="pdf" applyBodyTag="false">
    <head>
        <style>
            @page{
                size: A4 landscape;
            }            
            body {
                font-family: 'Arial Unicode MS';
            }
            .companyName {
                font: bold 30px; color: red;
            }  
        </style>
    </head>
    <body>
        <center>
        <h1>New Account Name!</h1>

        <apex:panelGrid columns="1" width="100%">
            <apex:outputText value="{!account.Name}" styleClass="companyName"/>
            <apex:outputText value="{!NOW()}"></apex:outputText>
        </apex:panelGrid>
        </center>
    </body>
</apex:page>
1
  • If the fix worked, please mark it as answer so others can benefit.
    – Saroj Bera
    Nov 5, 2016 at 19:33
4

Post-API version 27, you need to have the <html> tag in your VF page for

@page { size: landscape }

to work, plus you'll need to apply applyHtmlTag="false" to the apex:page tag. So your code above would need to be:

<apex:page standardController="Account" renderAs="pdf" applyBodyTag="false" applyHtmlTag="false"> <html> <head> <style> @page{ size: A4 landscape; } ... rest of your code here ... </head> </html> </apex:page>

1
  • you also need showHeader="false" Jul 21, 2022 at 15:12
0
<apex:page renderAs="pdf" applyHtmlTag="false" applyBodyTag="false">
<html>
    <head>
        <style>
            @page {
            size: A4 landscape;
            }
        </style>
    </head>
    ... rest of your code here ...
</html>
</apex:page>

Use the HTML Tag Post-API version 27 Also If you are using HTML tag all your styling will work too inside style tag

You must log in to answer this question.

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