Phantomjs: PNG & PDF rendering are differents on some websites

[Zabrane]

_[email protected] commented:_

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

v1.5

What steps will reproduce the problem?

1. PNG is perfect (see navigant.png):
   phantomjs rasterize.js http://www.navigant.com/ navigant.png
2. PDF is not as expected (see navigant.pdf):
   phantomjs rasterize.js http://www.navigant.com/ navigant.pdf

What is the expected output? What do you see instead?
The PDF and PNG rendering should look the same.

Which operating system are you using?
Linux (Fedora 16 and 17), OSX 10.6+.

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

Please provide any additional information below.
Another tool "wkhtmltopdf" (http://code.google.com/p/wkhtmltopdf/) based on Webkit
is able to correctly generate the PDF (see navigant-wkhtmltopdf.pdf).
I suspect the that pdf renderingin PhantomJS takes into account css "media" type.

Thanks for everything

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

[Zabrane]

_[email protected] commented:_

Same PDF problem appears with PhantomJS 1.6 (Linux and MacOSX).

[dpashkevich]

Related question: is it possible to override CSS media in PhantomJS (like we can do it in Chrome DevTools)? That way we could untie the output format (PNG/PDF) from used media (screen/print/...) and be able to create, e.g. a PNG screenshot of the print version of a page.

[LeonB]

I'm also having this issue. Image rendering is fantastic but PDF are not so good.

[staanii]

I'm facing the same problem. I found that you can override the webkit "print" CSS by forcing your CSS with "!important". Of course, it is a dirty workaround and it only works when rendering pages that you created.

As suggested, a better way would be to allow to choose the media type. Wkhtmltopdf's author seems to apply a patch to webkit before compiling it into wkhtml, allowing to print "screen" media type: https://bugs.webkit.org/show_bug.cgi?id=25866.

[cprsd]

I'm using this function to generate PDFs of certain webpages and my intention is to get the same content that is seen on the browser but what I get is the content with the print media styling applied.

Is there are way to turn this off and get an exact rendering of what one would see on a browser? I can contribute that back if I get some info on where to start.

[JamesMGreene]

@chethan-prasad Just query for all link stylesheet elements and change their media type to "print"/"all" before calling render.

[cprsd]

@JamesMGreene thanks for the help. I tried the following:

page.evaluate(function() {
    jQuery("link").each(function(i, v) {
        jQuery(v).attr("media", "all");
    });
});
page.render("snapshot.pdf");
phantom.exit();

But that doesn't seem to fix the issue. I tried reloading the DOM back into the page object without much luck.

[carlobonamico]

This is also linked to #10669 . I am writing a tool to print HTML slides to PDF and being able to select media independently of output filename would be great (at the moment PNG -> media screen, PDF -> media print).

As a workaround, !important on background classes fixed the problem.

[n1xim]

@JamesMGreene That only works if you aren't:
(1) Using a framework that concatenates stylesheets together for more efficient transfer and munges the page to suit; or
(2) Using a stylesheet that uses the "@media" selector.

(I don't remember if the results of "@import" CSS blocks show up in the DOM or not. I'm inclined to say no.)

FWIW, the upstream bug report in webkit is still open. If there's any hope of getting this fixed (properly, much less at all) we'd probably all be well served to register on their bug tracker and comment on that ticket.

[Taluu]

Hello,

Is there any thing new about this issue ? Like if the patch that the creator of wkhtmltopdf proposes stil works, and how to apply and let phantom take it into consideration ?

Thanks.

[crsrusl]

Agreed, it's a shame this feature doesn't exist.

C

[TylerRick]

Summary of problem: When using page.render...

• to output to a .pdf file, it uses @media print;
• to output to a .png file, it uses @media screen;

I'd like to be able to render to a .png file but using the print media type so that I get the same results as when I render to a .pdf. Is there any way to do that? It appears not.

I really wish they would fix this upstream (https://bugs.webkit.org/show_bug.cgi?id=25866).

I tested this by adding some CSS like this and rendering the page into both formats:

  @media screen {
    border: 1px solid blue;
  }
  @media print {
    border: 1px solid green;
  }

[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...

[n1xim]

@hawkerboy7 If the site you're attempting to QA has an '@media print' section in it that isn't going to do a lot of good. Most professionally designed sites will want to test both screen and print layouts, and they will quite likely want to share those tests with other people. Unfortunately, most office environments today use PDF for that purpose. Adobe has made their mark and the rest of us get to live with it (or futily fight against it).

[jorupp]

It doesn't really solve the issue, but I did come up with something that worked around this for a co-worker. It's a block of javascript that locks all CSS media queries to their current values using window.matchMedia. For a site we were trying to export, we were having issues not only with the print stylesheets, but some of the other queries were acting in unexpected ways during the PDF export, and this took care of all the layout issues in a single shot.

Here's the code we added in a page.evaluate block before rendering the PDF in case it helps anyone else in a similar situation: https://gist.github.com/jorupp/2af4d8583bd592b8331f

[rubystar]

Setting media="all" worked for me, phantomjs 2.1.1

[allianz77]

phantomjs 2.1.1 still not exporting correct in either pdf or png with latest bootstrap 4.0

[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!