0

Scenario :

I'm generating the Report in pdf format using WKHTMLTOPDF tool, Every thing works fine except the background image is not rendering in generated PDF.While it is showing properly in HTML format.

What i have tried :

  • I have changed the format of background image from png to jpg but no Luck.

  • I have used the --javascript-delay 5000 code in WKHTMLTOPDF, for waiting to render the image but still no luck.

Strange Behavior :

I have one more different image with background and it is showing properly.

My Question :

What is wrong with this scnerio, As the other image is showing properly with background but not this one ? Please help me .Thanks.

Updated :

I'm executing the cmd 

My Code: wkhtmltopdf http://example.com/renderpdf sample.pdf

And while executing getting the warnings :

QFont::setPixelSize: Pixel size <= 0 (0)

Used CSS :

background: transparent url(images/abc.png) no-repeat scroll 0% 0% / 100% 100%;
Harshal
  • 3,562
  • 9
  • 36
  • 65
  • Just in case, you are sure the path to the background is correct? – faerin Sep 15 '15 at 07:59
  • @entiendoNull , yes I'm pretty much sure that image path is correct and it is rendering properly on HTML. – Harshal Sep 15 '15 at 08:01
  • Try adding the complete path to where the image file is located instead of a relative one and see if that helps... – faerin Sep 15 '15 at 08:04
  • @Downvoters , Please explain the reason. – Harshal Sep 15 '15 at 08:24
  • @entiendoNull I'm giving the exact relative path like `http://example.com/assets/images.abc.png` – Harshal Sep 15 '15 at 08:29
  • Are you using bootstrap per chance? Also if you are using --print-media check what it looks like when doing print via the browser. – DMH Sep 15 '15 at 08:38
  • @DMH No I'm not using Bootstrap. I have tried using `--print-media-type` but still no luck. – Harshal Sep 15 '15 at 08:49
  • On your comment above you are using the path `http://example.com/assets/images.abc.png` isnt that meant to be `http://example.com/assets/images/abc.png` – DMH Sep 15 '15 at 08:51
  • ahh yest that was mistake in my comment, but it was proper in code. – Harshal Sep 15 '15 at 08:55
  • Show some code then? :) – faerin Sep 15 '15 at 09:49
  • @entiendoNull, Updated accordingly. – Harshal Sep 15 '15 at 10:00
  • Do you see any messages saying it cannot load the image file? When ever I create a pdf I do see it will say cannot load 'image' 404 or something along those lines. Also what version are you using? Have you tried another version? – DMH Sep 15 '15 at 10:20
  • @DMH No there is no such message regarding Image not found. I'm using the `0.12.1 (with patched qt)` and i was facing the issues with old version thats why i'm using latest version. – Harshal Sep 15 '15 at 10:37
  • weird. Is the web page you want to make a pdf available for us to see? – DMH Sep 15 '15 at 11:55
  • @DMH Sorry due to some security policy I can't show you that. – Harshal Sep 15 '15 at 12:06
  • Fair enough. Can you paste the css that sets the background? – DMH Sep 15 '15 at 12:37
  • @DMH see updated answer. – Harshal Sep 15 '15 at 12:56
  • Thanks I just looked. Does the background load if the url for the website does not end with a `/`. I have had issues with this in the past. Also with the css try adding `url(/images/abc.png)` – DMH Sep 15 '15 at 12:59
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89683/discussion-between-harshal-mahajan-and-dmh). – Harshal Sep 15 '15 at 13:04
  • Possible duplicate of [Wicked PDF +fonts+heroku+rails3.2](http://stackoverflow.com/questions/14734375/wicked-pdf-fontsherokurails3-2) – Arman H Nov 13 '15 at 23:11

2 Answers2

4

I finally figured it out; the problem was with my CSS.

I changed it from:

background: transparent url(http://example.com/abc.png) no-repeat scroll 0% 0% / 100% 100%;

to:

background:url(http://example.com/abc.png) no-repeat; background-size:100%` 100%;
ccjmne
  • 9,333
  • 3
  • 47
  • 62
Harshal
  • 3,562
  • 9
  • 36
  • 65
  • what was the issue with this exactly? not having a background-size specified? or that you previously had a syntax error? I still cannot get my image to display :( – mikey Jul 12 '22 at 08:26
1

Does your image file name contain whitespaces? If yes, use rawurlencode() function on your file name (not your complete file path) and try.

Ali Idrees
  • 578
  • 2
  • 12