Phantomjs: Support for defining media type when rendering pages

[nixx]

_[email protected] commented:_

When doing a print of a page using render, there is no way of defining the media type used. Today, it will use print, but it would be handy to be able to define the media type in use.

There is an open issue on QTWebKit on this: https://bugs.webkit.org/show_bug.cgi?id=25866

Today "print" is used when printing to a PDF which is not the wanted type when making screenshots from web pages for testing and documentation purposes.

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

[MarkMT]

This is causing me problems as well. As far as I can tell it is not limited to just pdf output. As a tool for capturing screenshots, it would seem sensible to allow phantomjs to capture what gets rendered on an actual screen by specifying the media type.

[Petah]

Any update on this?

[pankajan]

This is causing many problems. There should be a way to choose the media type when rendering.

[andineck]

(+1) on this as well

[qfox]

:+1:

[kopax]

(+1) got the same issue

[dinatih]

+1

[davidsonnabend]

+1

[jakgra]

+1

[neofreko]

note to self:
"When you use the pdf function the @media print is being used."
-- https://github.com/ariya/phantomjs/issues/10669

[jakgra]

To resolve this issue for me temporarily (before they decide to change webkit (the request is pending)) I have created a small utility to take pdf snapshots with @media screen . It is not a good solution as it forces you to use a modified version of phantomjs. But still, feel free to use it (of course you can also use it without the gui). Here is the website: https://github.com/jakgra/website-pdf-snapshot-taker

[flxw]

+1

[robert-hoffmann]

Thanks for the pointer @jakgra !

I was running into this problem too, especially on sites using bootstrap, and wkhtmltopdf did not seem to do the job either. So i rebuilt phantomjs on windows as per @jakgra instructions, and ended up making a UI frontent for taking some screenshots.

If anyone needs the modified windows build of phantomjs with @media print disabled you can grab it from the /dist folder here https://github.com/itechnology/PhantomUI

What if PhantomJS just patched it themselves (instead of waiting for webkit) and give us a switch to be able to choose how to capture pages, since i suppose many ppl will surely want to capture the various @media types for testing purposes ?

[kawing-chiu]

+1 for this

[jkenn99]

@ariya Would you accept a patch that changes the included qt code?

[jonnymd]

+1. After days of trying to track down the issues related to my code I FINALLY found this as the source of my problem. Trying to use webshot (wrapper for screenshots on server rendered screens using phantomjs) via meteor and sure enough I'm trying to use Bootstrap but coming up with SIGNIFICANTLY different output than intended. This simple option would REALLY be beneficial for me. Please consider patching in phantomjs (and not waiting for webkit to change) given this issue has been open for years now.

[willemmulder]

@ariya Is there any update on this?

What is required to get this implemented? How can we help?

[gunzip]

Came here as I had the same problem trying to take pdf screenshots of my website.

Just want to point out that you can programmatically change media queries target ('screen' 'to 'all') and activate media all for <link>s without touching the original CSS.

see the following snippet (activateAllStylesheets()):

https://gist.github.com/gunzip/0ef59bab2d304dc597513413f2bd9305

it works only if jQuery is included in the web page but it's easy to convert into vanilla js.

[michaelfranzl]

+1. A CSS media switch would really be useful, rather than dynamically modifying the website CSS. I'm surprised that this option isn't available.

[SHND]

+1

[thowland]

+1

[mclavacca]

+1

[AdamReece-WebBox]

+1

[jeerbl]

Any progress on this feature?

[sameersemna]

+1

[theaspect]

@sameersemna phantomjs discontinued and won't be developed. see https://github.com/ariya/phantomjs/issues/15344 use https://github.com/GoogleChrome/puppeteer

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