wkhtmltopdf vs phantomjs PDF generation of a HTML page with tables and colors

[leslie Lau]

I've been using wkhtmltopdf to generate PDF output of my web page.  I looks nice and works out of the box.  

I just started to check out phantomjs and see if it works as good as wkhtmltopdf.  I would use the default rasterize.js and it generates the PDF but the output has no color.  Just plain white. 

Is there some sort of setting I'm missing from phantomjs to make it work like wkhtmltopdf?  Also, is it easy to add headers and footers like wkhtmltopdf?

Leslie

[Ashok Varma]

I am facing the same issue. Did you have any luck fixing it?

Ashok

[leslie Lau]

Still no luck even with phatomjs 1.9.7.....I use bootstrap with my web pages.....I wonder why phantomjs does't render the background colors at all.....just all black and white.....

[Ashok Varma]

I managed to fix the issues we were facing. The problem was not with phantomjs. It was in the css. Phantomjs uses the media @print and most of our styling was under the media @screen. This was causing all the problems we were facing

[leslie Lau]

Thank-you for replying so quickly Ashok....I just put this into my html page:

<link media="print" href="css/bootstrap.min.css" rel="stylesheet">

And still doesn't do anything.  Still my PDF is black and white.

Leslie

[Ashok Varma]

Just to check whether css is the issue. Use an inline style and add "!important"

--
You received this message because you are subscribed to a topic in the Google Groups "phantomjs" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/phantomjs/AU84T8K5zsg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to phantomjs+...@googlegroups.com.
Visit this group at http://groups.google.com/group/phantomjs.
For more options, visit https://groups.google.com/d/optout.

--

Ashok Varma

http://about.me/ashokvarmak

[leslie Lau]

Woohoo!  Color showed up now....I had to do the opposite of what you did:

<link media="screen" href="css/bootstrap.min.css" rel="stylesheet">

I had to use media @screen instead.  I think bootstrap media @print kicks in when phantomjs tries to render the page because it thinks that it's in print mode.  In Print Mode, bootstrap turns everything to black and white.  So I have to force it to Screen Mode....then the color showed up.

Thanx for your help!

Leslie

[leslie Lau]

OK...the real culprint is bootstrap.min.css.....there's some lines to enable print mode:

@media print {

  * {

    color: #000 !important;

    text-shadow: none !important;

    background: transparent !important;

    box-shadow: none !important;

  }

Once I changed to by removing the lines to these, then it works perfectly:

@media print {

  * {

  }

  table {

    border-collapse: collapse !important;

  }

  table-bordered th,

  table-bordered td {

    border: 1px solid #ddd !important;

  }

Now I'm able to use PhantomJS to render large 7000 row bootstraped tables with color and much faster than wkhtmltopdf.

Leslie

[leslie Lau]

And finally to just complete this picture....the real problem is that PhantomJS does not support setting media type before rendering the page:

https://github.com/ariya/phantomjs/issues/10374

If this issue is fixed, then we can set the media="screen" and it would just work without having to mess around with different CSS styles.

Leslie