+ Start a Discussion
Philip FPhilip F 

Internal server error adding Lightning Design System CSS to Visualforce page rendered as pdf.

I can hear the choirfolk chanting: Visualforce is so stale!  To which I say: Unless you want to actually print your work. (It would be amazing if lightning could print in a useful way.)

I'm working on a Visualforce page that will be included included in a lightning component that will also be used for a printed version of the VF page contents renderd as pdf.   

I've tried every permutation of <apex:slds />, lightningStylesheets="true", applyHtmlTag="false", applyBodyTag="false", renderAs="pdf", and renderAs="advanced_pdf".

I appears that any attempt to render visualforce that includes the SLDS CSS causes Salesforce to puke with "An internal server error has occurred."  I'm not the first to discover this behavior: https://developer.salesforce.com/forums#!/feedtype=SINGLE_QUESTION_SEARCH_RESULT&id=9060G000000Ub1lQAC

I haven't tried embedding the LDS CSS in a static resource because it appears this didn't work for others: https://github.com/salesforce-ux/design-system/issues/341

Does anyone have insight into the best practice to style a Visualforce page to match the SLDS for inclusion in a lightning component and printing?

Thank you,
-Philip
Raj VakatiRaj Vakati
Lightning design system will not suport in PDF render as .. You need to use CSS 
Shivankur NaikwadeShivankur Naikwade
Unfortunately, Apex:slds doesn't go with renderAs="pdf" attribute. It means you can't use both these two features in a VF page. You will get this error An internal server error has occurred
If you want, you can test this, 
Copy the example code from the below url and add  renderAs="pdf" attribute in apex:page tag. 
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_styling_slds.htm
David Autry 4David Autry 4
I know this is an old thread but I hope this post will help others.

You can control the logic to render as lightning style or pdf using formulas.
 
<apex:page standardController="MyCustomObject__c" extensions="MyCustomObjectController"
           contentType="{! renderedContentType }"  renderAs="{! renderingService }"
           showHeader="{!IF(renderingService = 'PDF',false,true)}" 
           applyHtmlTag="{!IF(renderingService = 'PDF',false,true)}"           
           lightningStylesheets="{!IF(renderingService = 'PDF',false,true)}">
    <html>
        <head>
            <apex:slds rendered="{!IF(renderingService = 'PDF',false,true)}"/>
            <style type="text/css" media="print">
                @page {               
                   <!-- Your page styles/parameters here -->
                }   
                @media print {
                    <!-- Your print styles here -->
                }
            </style>
        </head>
        <body>
            <!-- A lot of HTML / VF here -->
        </body>
    </html>
</apex:page>

 

The controller logic for "show/print as PDF" can be found here: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_output_pdf_print_as_pdf_button.htm

 

Thanks.
 

David