4

I want to known suggestion about lightning design system rendered as PDF. I have a VF page that page rendered as PDF format. My page is also using lightning design system. but that designs are not rendered in PDF view. So any suggestion or Idea is most welcome. Here my code is

<apex:page renderAs="pdf" applyHtmlTag="false" sidebar="false" showHeader="false" standardStylesheets="false">
    <html>
    <head>
        <apex:stylesheet value="{!URLFOR($Resource.SLDS, '/assets/styles/salesforce-lightning-design-system.min.css')}"/>
    </head>

    <body>
        <div class="slds">
        <div class="slds-grid slds-grid slds-wrap slds-grid--pull-padded" style="text-align: center;">

            <div class="slds-col--padded slds-size--1-of-1">
                BAR CODE HERE
            </div> 

            <div class="slds-col--padded slds-size--1-of-1">
                16JULCOM
            </div>

            <div class="slds-col--padded slds-size--1-of-1">
                00004
            </div>

            <div class="slds-col--padded slds-size--1-of-1"> 
                <div class="slds-grid slds-wrap slds-grid--pull-padded">
                    <div class="slds-col--padded slds-size--1-of-3">Time Stamp 1</div>
                    <div class="slds-col--padded slds-size--1-of-3">Time Stamp 2</div>
                    <div class="slds-col--padded slds-size--1-of-3">Time Stamp 3</div>
                </div>
            </div>
        </div>
        </div>
    </body>
    </html>
</apex:page>
Improve this question
7
  • Please share code else it will hard to assist with
    – Mohith Shrivastava
    Jul 29, 2016 at 10:12
  • I attached my code here @MohithShrivastava
    – MSCB
    Jul 29, 2016 at 10:17
  • Can you say ApplyHtMLtag=false and have html tag yourself written
    – Mohith Shrivastava
    Jul 29, 2016 at 10:33
  • Its does not work. I updated my code @MohithShrivastava
    – MSCB
    Jul 29, 2016 at 10:44
  • Everything should be under main div with class SLDS.I think you may need that
    – Mohith Shrivastava
    Jul 29, 2016 at 10:54

4 Answers 4

Reset to default
1

Rendered as pdf does not allowing Internal and External style classes it only allowing Inline styles.

Improve this answer
1

LEX is not supported in RenderAs Pdf right now. See trailhead for lightning experience module. Trailhead

You have to remove it to render as PDF or you can use other JS libraries like Pdf.js

Improve this answer
1

You can not use SLDS when using renderAs=PDF. Not just that, but you also lose CSS properties like Grid and flex. However, if you want the Grid system in particular, then you can write custom CSS with float and width properties.

I have written in detail the sample code in my blog that uses the above properties and achieves a simple custom Grid system for PDFs in Visualforce page.

Improve this answer
-1

Visualforce pdf supports internal and external css files. But the issue is SLDS css file is not supporting in Visualforce PDF for some reason. The below URL works fine with internal CSS file(stored CSS file in Static resource)

https://developer.salesforce.com/page/Creating_Professional_PDF_Documents_with_CSS_and_Visualforce

Improve this answer

You must log in to answer this question.

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