3

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?

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.   

To prevent recommendations to use the SLDS in Visualforce, it seems this is a dead end.

I've personally 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.

I haven't tried embedding the LDS CSS in a static resource because it appears this didn't work for others.

As @Ronnie pointed out, it seems using the SLDS CSS itself will not work because the pdf rendering engine Salesforce uses doesn't support modern CSS.

Which leave me asking: Can you recommend a best practice for styling a Visualforce page to conform with the SLDS without actually including the SLDS?

|improve this question
  • salesforce.stackexchange.com/questions/178572/… – Ronnie Jul 3 '18 at 0:11
  • While multiple users have reported this as a duplicate, I was intending to ask a different question - what's the best practice to style a VF page to match the SLDS without using it? The subject is misleading. – Philip F Jul 4 '18 at 17:37
  • There used to be a service that you would do a callout to, it would retrieve the HTML version of the page and return the data uri for the PDF version. It handled bootstrap very well and possible SLDS. For the life of me I cannot find it. I know it used Heroku on the backend and was very simple to use.....Maybe someone here has the link to the site.... – Eric Jul 5 '18 at 2:50
1

If I understood correctly, you are trying to avoid loosing the styling of the page when you set it as renderas pdf, right?

I had this issue in the past (not with SLDS), in my case was with bootstrap v3, I was trying to use their standard css, I did a lot of try and error and I found a limit in the css of about 1300 lines, so in other words if I import the whole css the page will not render the styling, but if my css file was under 1300 lines mark, then i will get some styling.

What I ended up doing was (I am not really sure if slds have the same options) to cherry pick the bootstrap components that i required for my page, making the css file much smaller.

From your tags I usually also add

docType="html-5.0"
|improve this answer
  • i agree - this may be a better approach - it is however a bit more time consuming ( depending on the page you are trying to render ). I have had the same issues with using Bootstrap styling in the past. – Ronnie Jul 4 '18 at 23:17
  • agree is annoying, i am wondering if there is an idea already that we can vote on – manza Jul 4 '18 at 23:32
  • no - i haven't seen anything different than just taking in small chunks of CSS. I have done a ton of document clones for clients in PDF and that has always been the easy way to get consistent rendering. – Ronnie Jul 4 '18 at 23:40
  • Thanks, Ronnie and manza! It makes sense that it's a file size limitation versus specific CSS tags. I'll try extracting the LDS CSS bits I'm actually using then report back. – Philip F Jul 6 '18 at 0:00

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.