Phantomjs: PNG output is perfect, but PDF output doesn't seem to respect CSS styles

[ariya]

_[email protected] commented:_

Which version of PhantomJS are you using? Tip: run 'phantomjs --version'.
1.6.0

What steps will reproduce the problem?

1. Using rasterize.js (from the example documentation) to render html to a PDF or PNG
   2.
   3.

What is the expected output? What do you see instead?

Not sure if this is exactly a bug - the PNG output renders perfectly, but the PDF output doesn't seem to use the CSS styles specified in the page. Is PDF just not capable of rendering with all CSS rules?

Which operating system are you using?

Ubuntu Linux

Did you use binary PhantomJS or did you compile it from source?

Binary

Please provide any additional information below.

Disclaimer:
This issue was migrated on 2013-03-15 from the project's former issue tracker on Google Code, Issue #669.
:star2:   5 people had starred this issue at the time of migration.

[proger]

This is especially related to colors: none of the colors enforced using CSS are applied. Is there any reason why this happens?

[JamesMGreene]

Are your CSS stylesheets' media types are set to "screen" instead of "print" or "all"? I believe the PDF rendering operates in "print" mode and so would ignore "screen"-specific CSS but I could be mistaken.

[michelson]

add media: "all", phantomjs will render just fine

[adamgotterer]

I'm having the same problem. Looks great as a png, but my styles in PDF are completely ignored. I've tried all different kinds of media types.

[proger]

after reading the source-code i've found a hack that can be used to force apply colors, use -webkit-text-fill-color instead of color (if you specify this attribute then background will also be applied)

[carlobonamico]

see also #10623

[fedegiust]

This is also happening on Windows Server. I've tried setting media="all" but still having the same problem.

[roy360]

I just resolved this issue by simply putting the !important tag on EVERY css element. This worked and fixed the problem.

[hookdump]

Thank you @roy360 , the only solution that worked for me was adding the !important tag on every css element.

[roy360]

No problem @hookdump glad you got it working.

[trueskunk]

I still have this problem (PDF vs PNG) even having !important tag on every css elements. OS: Windows 7 Enterprise 64-bit. PhantomJS: 1.9.7

phantomjs rasterize.js http://www.highcharts.com/demo/ test.pdf

Setting media to all did not help eather.
The only change I did to the original rasterize.js is set timeout to 1000, which made it to wait for the chart to complete. I'll appreciate any reasonable suggestion.

[tuupola]

Any news on this?

[hawkerboy7]

I think i have found the fix for this.
Open your bootstrap file and seach for the following:

@media print {

• {
  color: #000 !important;
  text-shadow: none !important;
  background: transparent !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  }

Remove the '!important'.

When you use the pdf function the @media print is being used.
Removing the important will allow you to use your own style, you could also add important to each of your own styles but that's probably not the best way to go...

[skyrocknroll]

@hawkerboy7 +1 Working fine for me.

[dinatih]

add media: "all", phantomjs will render just fine

Hello @michelson, where did you put media: "all" please ? Is it in rasterize.js as page.settings.media = all; ?

[michelson]

@dinatih add media="all" to your css, like:

<link href="my.css" media="all" rel="stylesheet" />

best!

[dinatih]

Oh alright! But I have some inline css style for printing :s, so this doesn't works. I think it was a solution for tell phantomjs to not use some css rules.

Thank you anyway !

[shaneparsons]

@hawkerboy7 +1 Works for me!

[GoldHornKing]

Adding media='all' instead of media='screen' saves my life.

Thanks all

[pomirleanu]

Just remove "!important" from all the @media print sections css and will work!
PHNATOMJS first reanders the @media print css and if you have important he will omit the rest of the css....

[shaidams64]

@hawkerboy7 @pomirleanu could you please clarify where I can find my bootstrap file? Thanks in advance!

[hawkerboy7]

Just the file you downloaded from http://getbootstrap.com/ I don't know where you placed it. But if you have sublime text editor you can try the following:

• Open your whole project folder with sublime (you can drag and drop the folder onto sublime)
• Right click the folder and press 'Find in Folder'
• Then type "@media print {" and press enter

[shaidams64]

@hawkerboy7 sorry but what do you mean by "project folder" ? I don't think i ever downloaded bootstrap. I'm actually trying to convert ipython notebooks in my local host to pdf... I am passing customized themes to my notebook which shows up when I open it in the browser but it's like phantomjs disregards them

[shaidams64]

I thought you were talking about editing phantomjs source files some how...

[hawkerboy7]

Are you creating a pdf from a website (html and css)?
Then a problem you may be facing is that phantom (when phantom creates a pdf) uses the media query @media print {}, which can override some of your own styling.

If I understand you correctly you have a html page with css which has a customized theme?
Then when you make the pdf, the phantom disregards your custom theme?
This could be occurring because of what I wrote just above.
Removing the !important from all properties in your css file inside the @media print {} might help

[shaidams64]

you understood it right, Thank you I will try that

[shaidams64]

@hawkerboy7 +1 it worked!! Thank you! removing the !important tag was the trick! I just had too many css files but I finally found the right one to edit! :)

[hawkerboy7]

Great I am happy it worked! =D

[toppa]

@hawkerboy7 - worked for me too. For anyone else using the bootstrap-sass gem, I forked it, and removed the import of the bootstrap print styles. It was forcing everything to black & white (including table background colors, etc), which is too presumptuous for my taste.

https://github.com/poka-yoke-design/bootstrap-sass

[dulcedilip]

It worked for me after removing _print.sass from _bootstrap.sass, but still some of the web page content is not capturing, due to this capturing of the screen i cant remove !important from all @media queries. Any help to solve this problem.

[blakebeaupain]

+1 on this. PNG looks perfect for all sites, but PDF is a little wonky. What about printing websites that we do not own/maintain to PDF?

[dulcedilip]

I am not bother much on other websites on pdf generation as of now.. i am targeting for my website which is not rendering properly as pdf.

[katrotz]

@hawkerboy7 Nice catch, I thought that this is a problem of the phantomjs, but actually the bootstrap print media was screwing my background colours

[ZachMilne]

@hawkerboy7 Thanks for catching this. It was indeed the bootstrap print styles for me causing the colors to be changed to black in the PDF but not the PNG.

[luisaoba]

@hawkerboy7 perfect! It Works! The best solution is the simple solution! Thank you!

[juhguu]

@hawkerboy7 You save my life! Thank you. :)

[pratheekhegde]

@hawkerboy7 Thanks a lot. I removed all the occurrence of !important from my bootstrap source. I was getting my CSS in the PDF.

[gunzip]

see also https://github.com/ariya/phantomjs/issues/10374#issuecomment-267044771

[flexelektro]

@hawkerboy7 thanks a lot.

[pouu69]

i'm used "only screen" in css media
above i did read a solve problem
so i changed link tag like below
<link href="" media="all" rel="stylesheet"/>
but not working.

[shenkev]

@hawkerboy7 removing !important from @media print didn't seem to work for me, the fonts are still messed up. Especially the math I render with MathJax, the font sizes/styles are definitely not right (font size is a lot smaller in the pdf and not the original font). Any ideas?

[hawkerboy7]

The following may help you see the differences in the inspector.
F12
Open the console.
The console tab can be shown by pressing esc multiple times. (It will show and hide it).
Open the rendering tab in the console tab.
Emulate CSS Media there you can change screen to print.
This may help you see what the page would like like if printed.
And then check the styles applied in the elements view and figure out where the incorrect styling comes from.

[medusar]

@hawkerboy7 it works for me too, thanks

[stale[bot]]

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!