Having landscape and portrait orientation within 1 rendered PDF page
We needed to render a pdf from Salesforce, which is no issue at all. You just need to add the renderAs and get rid of the header and sidebar:
<apex:page renderAs="pdf" showheader="false" sidebar="false"
controller="Invoices_PDF_generation">BUT, we also needed to make sure that in the pdf, the first part of the document was printed in portrait orientation, while the second part had to be in landscape orientation.
It took us some time to find the way to do this, and it turned out to be a very handy CSS trick! We found it here.
This is the way to go:
<style>
@page port {size: portrait;}
@page land {size: landscape;}
.portrait {page: port;}
.landscape {page: land;}
</style>Once you have this, you simply create 2 divs in your html page and add the class to them:
<div class="portrait">this one is portrait</div>
<div class="landscape">this one is landscape</div>Here’s a more complete view of how the code should be used in an apex page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <apex:page renderAs="pdf" showheader="false" sidebar="false" controller="[your_controller_name]"> <head> <style> @page port {size: portrait;} @page land {size: landscape;} .portrait {page: port;} .landscape {page: land;} ... [any other styling] </style> </head> <body> <div class="portrait" style="page-break-after:always;"> this page is printed in portrait orientation. </div> <div class="landscape"> this page is printed in landscape orientation. </div> </body> </apex:page> |
The page break style on the first div is to make sure that when printing, a new page is always started for the second div. You must make sure to add this, if not, the orientation change will probably fail.