0

In Our Application , We are getting a formatted Html string from a external library(Bryntnum - provides gantt chart features).

The Formatted Html is returned in a string format.

Our business need is to convert this html into vf page and render it as a pdf. When I just use the html string and use it in vf page all the css is loaded correctly.

Image ( apex page which is not rendered as pdf) apex page which is not rendered as pdf

Output Output when not renderred as pdf

Now if i try to render the same vf page as pdf it does not load any css. Adding renderaspdf to vf page.

Output: enter image description here

This is the original html string which is coming from a third party library. It would be really helpful if someone can help me on how i can get pdf to have css.

Steps to get the result. Open Developer Console in Salesforce. Create a dummy vf page. and Copy the below Html text which is inside the text file https://docs.google.com/document/d/1BV98W5ZQ84khhsNuRgCyItsnvKKSKcoRVjFe2GMbsE4/edit

1
  • 2
    In my experience, it completely ignores inline CSS and you are forced to actually use "style" attributes for the individual elements in the page. Total PITA.
    – Phil W
    Nov 12, 2021 at 12:19

1 Answer 1

1

In my experience, you need to apply a few attributes to the apex:page, including applyHtmlTag and applyBodyTag. Here's an example that works:

Static Resource q361913

div {
    color : red;
}

Page

<apex:page renderAs="pdf" showChat="false" showHeader="false" applyHtmlTag="false" applyBodyTag="false">
    <html>
        <head>
            <link rel="stylesheet" href="{!URLFOR($Resource.q361913)}" />
        </head>
        <body>
            <div>
                Hello World
            </div>
            
        </body>    
    </html>
</apex:page>

Output

Sample PDF

Note that only CSS1 and CSS2 is supported, so any more advanced CSS may not render the way you expect.

You must log in to answer this question.

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