[SalesForce] Render as pdf with css not working properly

I have a controller which calls a couple of function. The variables are then send to the apex page, which is mostly a html page.
When I am redirecting to the visual force page, the report I want to create is perfectly fine , but when at the begining of my apex page I put render as pdf, then the css is not displayed correctly.

The image one is the visual page working perfectly, the image 2 is the render as pdf

I used bootstrap to create my visual page (I tried to upload bootstrap.css locally, I tried using the link to the official page, and I also tried to incorporate the boostrap.css between style tag on the page directly).

I would like to know if it was possible :

1- to fix the bad render when the visual page is rendered as a pdf

or
2- to download the visual page differently in order to add it to an email ( I tried to create an html template for that, but it is not practical at all as the controller and the page is quite complex)

How could the css be not working when transforming the html to a pdf ?
Or at least be not compatible like that.

I can post the full code if anyone could help it would be very nice

enter image description here

enter image description here

Best Answer

The issue you mentioned quite common when your working with Visualforce pdf. I have came across the issue most the time during my development cycle.

Still i don't find out any solution which will convert directly support your html to pdf without any extra work around.

Below are the few thing i would like to you utilize in Visualforce PDF format, That make you achieve some what reach the style of html.

Use @page tag resize the page margin and padding 

@page {
      margin: 0.3cm 0.2cm;
      size: A4;
      padding: 10px;
      }

Here is the important guideline reg. rendering VF pages as PDF:

If you use inline CSS styles, you must set the API version to 28.0 or greater, set < apex:page applyBodyTag="false" >, and add static, valid < head > and < body > tags to your page.

I have noticed Style Tag float will give you more trouble in pdf, try to replace float with inline tags

Also Please go though below link for Limitation when rendered as pdf : pages_output_pdf_considerations.

Related Topic