[Html2PdfConverter] The component is blocking some css while generating pdf.

Forge Component
(61)
Published on 17 May by Guilherme Pereira
61 votes
Published on 17 May by Guilherme Pereira

Hello team,

 I have requirement to display images and column chart in pdf report with fixed column size and fixed image placeholder. If the image resolution doesn't matches with placeholders resolution it should reflected in inside that placeholder.

I made perfect replica of what i want and what i'm getting here.

Can some one help me with this?..


Thanks in Advance,

Regards, Kiran Shinde.

I see, it has nothing to do with the Html2PdfConverter though, but instead relies on the styling the printer receives.
Try pressing CTRL+P on the page, this is what the printer sees (also what Html2PdfGenerator sees).
You can fix the color issue by adding:
-webkit-print-color-adjust: exact

To the elements which are not showing the background color, but you might be able to come further if you use a CSS file instead of inline styling.

Hello Joey Moree,

Sorry for late reply, As you said i haven't applied css thorough inline you can see in attachment OML.

Hey Kiran,

I've looked a bit more into it, it seems to be a known problem!

The reason this happens is because the background colors and images are ignored in printing! Luckily you have 2 options to force the printing of colors and images, 1 is to set the printBackground option to true.

printOptions: {
      printBackground: true,
  }

The other options is to add -webkit-print-color-adjust: exact; To your body tag (or the specific tags where you need the background to appear).

Joey Moree wrote:

Hey Kiran,

I've looked a bit more into it, it seems to be a known problem!

The reason this happens is because the background colors and images are ignored in printing! Luckily you have 2 options to force the printing of colors and images, 1 is to set the printBackground option to true.

printOptions: {
      printBackground: true,
  }

The other options is to add -webkit-print-color-adjust: exact; To your body tag (or the specific tags where you need the background to appear).

I did what you said but its not working. can you attach a working demo.