1

I'm trying to generate a PDF file using Apex only (without using VF).

I'm having trouble using basic css properties like width and height, I tried to include them in the head, tried inline, but nothing changes:

<div style="width:15in;height:15in;"> Dear John,</div>

enter image description here

However, When I try to use a different property, like setting the color then it works.

<div style="width:15in;height:15in;color:blue;">

enter image description here

String myHtmlString = '<html> <head> </head> <body> <div style="width:15in;height:15in;"> Dear John,</div> <div>Thank you for taking the time to speak with us</div> </body></html>';
 
ContentVersion conVer = new ContentVersion();
conVer.ContentLocation = 'S'; 
conVer.PathOnClient = 'scratch.pdf';
conVer.Title = 'ScratchV2'; 
conVer.VersionData = Blob.toPDF(myHtmlString); 
insert conVer;   
/*Creating ContentDocumentLink ....*/

Few questions:

  1. Is it even possible to generate a PDF with CSS without using Visualforce?
  2. If yes, how to include CSS? where can I find supported/unsupported properties for PDF format?
  3. Assuming width is not supported, how can I change the positions of the elements?

----------- EDIT -----------

Following @sfdcfox answer, I ran my code in a CSS validator set to CSS2 and removed all the unsupported properties until it was validated. But on the PDF, the CSS isn't being rendered: enter image description here

Newly HTML:

<html>
   <head>
      <meta charset="UTF-8">
      <style>body{width: 8.5in; height: 11in; margin: 0;}.page{page-break-after: always; position: relative; width: 8.5in; height: 11in;}.page-content{position: absolute; width: 8.125in; height: 10.625in; left: 0.1875in; top: 0.1875in;}.text{position: relative; left: 55px; top: 407px; width: 7in; font-size: 10pt; line-height: 14pt;}.date{float:right;}#main-logo{position: absolute; left: 542px; top: 23px; width: 2in; height:.3in;}</style>
   </head>
   <body>
      <div class="page">
      <div class="page-content">
         <div id="main-logo"></div>
         <div class="text">
            <span class="date">July 16, 2018</span><br>Dear Luke,<br><br>Thank you for being a part of the Infinity Credit Union family! We wanted to share some additional services that we offer to complement your account.<br>
            <ul style="list-style-type: disc;">
               <li><b>Online Banking: </b>The most efficient way to manage your day-to-day finances! Infinity offers free online bill pay, electronic statements, simple fund transfers, and automated account alerts.<br><br></li>
               <li><b>Mobile Banking: </b>Provides the convenience of online banking via your mobile device! Safe, secure, and easy to use, Infinity mobile banking even provides the ability to make check deposits directly from your phone.<br><br></li>
               <li><b>Student Loans: </b>Preparing to send your son or daughter to college? Infinity provides friendly rates to help cover the costs of tuition, room and board, and books.<br></li>
            </ul>
            Your Infinity membership opens the door for all kinds of valuable benefits and services. Just give us a call at (800) 555-5555 or visit your local branch to learn more.<br><br>Sincerely,<br><br>Sarah Sandifer<br>Infinity Credit Union 
         </div>
      </div>
   </body>
</html>

1 Answer 1

2

Is it even possible to generate a PDF with CSS without using Visualforce?

Yes.

If yes, how to include CSS? where can I find supported/unsupported properties for PDF format?

Just use a <head><style>...</style></head>. Note that your CSS is invalid; a div always takes up 100% width by default, unless you change it to display: inline-block. Also, see @page if you're trying to set the page size; anything that overflows may produce multiple pages or be clipped, instead of stretching out the page size.

Assuming width is not supported, how can I change the positions of the elements?

It is supported. Use position: relative/absolute/fixed, and display:inline/inline-block/block. Anything that's supported in CSS1 and CSS2 should be supported, while CSS3 is not generally supported.

Documentation is spotty at best, but it's mostly just an implementation of Flying Saucer, though I'm not sure what version Salesforce uses.

3
  • Thank you for the response @sfdcfox, the width and height were just examples to demonstrate that the css isn't working as expected. Following your answer, I ran my code in a validator but now I see that the CSS isn't rendered. Please see my updated question ^
    – Json
    Commented Aug 15, 2021 at 6:48
  • 1
    I must say my (dim and distant, ~2017) experience was that CSS didn't work for me. I had to individually style elements which was a total PITA.
    – Phil W
    Commented Aug 15, 2021 at 8:18
  • @PhilW tbh, I never used it before this question; I presumed it worked just like normal HTML. That said, it does appear that style sheets (perhaps even <head> itself), seems unsupported. This is not addressed in any documentation. I'll have to ask around and see if there's anyone who knows.
    – sfdcfox
    Commented Aug 15, 2021 at 14:09

You must log in to answer this question.

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