3

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>
  • Please share code else it will hard to assist with – Mohith Shrivastava Jul 29 '16 at 10:12
  • I attached my code here @MohithShrivastava – MSCB Jul 29 '16 at 10:17
  • Can you say ApplyHtMLtag=false and have html tag yourself written – Mohith Shrivastava Jul 29 '16 at 10:33
  • Its does not work. I updated my code @MohithShrivastava – MSCB Jul 29 '16 at 10:44
  • Everything should be under main div with class SLDS.I think you may need that – Mohith Shrivastava Jul 29 '16 at 10:54
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

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 | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.