I want to convert a Visualforce to Pdf and preserve the visualforce css styling the same time in the generated PDF. I am able to achieve the first part using the attribute renderas='pdf'. However the styles are getting lost. Any pointers if and how both can be achieved at the same time.
[SalesForce] How to convert a visualforce page to PDF and preserve the visualforce styles at the same time
Related Solutions
Change your <apex:page> to this:
<apex:page renderAs="pdf" applyBodyTag="false">
According to the docs:
A Boolean value that specifies whether or not Visualforce should automatically add a
<body>tag to the generated HTML output. Set to false to disable adding the<body>tag to the response, for example, when the tag is statically set in your markup. If not specified, this value defaults to the value of the applyHtmlTag attribute if it's set, or true, if applyHtmlTag isn't set.
Using the sample you provided, I was able to render the following as PDF:
The header (logo) appears on every page as expected using the following VF:
<apex:page renderAs="PDF" applyBodyTag="false">
<head>
<style type="text/css" media="print">
@page {
margin-top: 1.5in;
@top-center {
content: element(header);
}
}
div.header {
position: running(header);
}
.sectionTitle {
font-weight: bold;
}
</style>
</head>
<div class="header">
<center><img src="{!$Resource.logo}" width="25%"/></center>
</div>
<div class="content">
<table>
<tr>
<td class="sectionTitle">test</td>
</tr>
<!--rest removed for brevity...-->
</table>
</div>
</apex:page>
It is a common assumption that the HTML to PDF engine presently used by Salesforce is Flying Saucer that only supports version 2.1 of CSS (W3C Recommendation 07 June 2011) whereas SLDS is designed to work with modern browsers only that support version 3 CSS.
So while you may be able to eventually get some parts of the SLDS markup to work, the PDF output is unlikely ever to be as you would like it to be. Including simple CSS used just for the PDF output is the simplest workaround.
Best Answer
When we add
renderas='pdf'then Salesforce create PDF in server side in that process we lost many CSS which are not compatible with Salesforce's PDF engine.You can try
renderAs="advanced_pdf"to render in PDF. It support much better CSS but also have some limitation. You can read them in details here: Use Advanced PDF to Render Visualforce Pages as PDF Files (Pilot).Another thing which you can do is
renderas='{!DynamicType}'you can also pass a dynamic type(HTML or PDF) here and based on your use case display the rendered PDF or a normal Visualforce page.