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>
7
  • Please share code else it will hard to assist with 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 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 Jul 29, 2016 at 10:54

4 Answers 4

1

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

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

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.

-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

You must log in to answer this question.

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