This repository has been archived by the owner. It is now read-only.

Support for defining media type when rendering pages #10374

Open
nixx opened this Issue Feb 7, 2012 · 26 comments

Comments

Projects
None yet
@nixx

nixx commented Feb 7, 2012

oyvind.b...@gmail.com 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.
🌟   5 people had starred this issue at the time of migration.

@MarkMT

This comment has been minimized.

Show comment
Hide comment
@MarkMT

MarkMT Aug 30, 2014

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.

MarkMT commented Aug 30, 2014

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

This comment has been minimized.

Show comment
Hide comment
@Petah

Petah Oct 7, 2014

Any update on this?

Petah commented Oct 7, 2014

Any update on this?

@pankajan

This comment has been minimized.

Show comment
Hide comment
@pankajan

pankajan Nov 20, 2014

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

pankajan commented Nov 20, 2014

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

@andineck

This comment has been minimized.

Show comment
Hide comment
@andineck

andineck Nov 27, 2014

(+1) on this as well

andineck commented Nov 27, 2014

(+1) on this as well

@zxqfox

This comment has been minimized.

Show comment
Hide comment
@zxqfox

zxqfox commented Dec 4, 2014

👍

@kopax

This comment has been minimized.

Show comment
Hide comment
@kopax

kopax Dec 16, 2014

(+1) got the same issue

kopax commented Dec 16, 2014

(+1) got the same issue

@dinatih

This comment has been minimized.

Show comment
Hide comment
@dinatih

dinatih commented Feb 13, 2015

+1

2 similar comments
@davidsonnabend

This comment has been minimized.

Show comment
Hide comment
@davidsonnabend

davidsonnabend commented Feb 17, 2015

+1

@jakgra

This comment has been minimized.

Show comment
Hide comment
@jakgra

jakgra commented Feb 22, 2015

+1

@neofreko

This comment has been minimized.

Show comment
Hide comment
@neofreko

neofreko Mar 26, 2015

note to self:
"When you use the pdf function the @media print is being used."
-- #10669

neofreko commented Mar 26, 2015

note to self:
"When you use the pdf function the @media print is being used."
-- #10669

@jakgra

This comment has been minimized.

Show comment
Hide comment
@jakgra

jakgra Mar 30, 2015

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

jakgra commented Mar 30, 2015

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

This comment has been minimized.

Show comment
Hide comment
@flxw

flxw commented Jun 9, 2015

+1

@robert-hoffmann

This comment has been minimized.

Show comment
Hide comment
@robert-hoffmann

robert-hoffmann Jun 12, 2015

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 ?

robert-hoffmann commented Jun 12, 2015

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

This comment has been minimized.

Show comment
Hide comment
@kawing-chiu

kawing-chiu commented Jul 27, 2015

+1 for this

@jkenn99

This comment has been minimized.

Show comment
Hide comment
@jkenn99

jkenn99 Sep 18, 2015

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

jkenn99 commented Sep 18, 2015

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

@jonnymd

This comment has been minimized.

Show comment
Hide comment
@jonnymd

jonnymd Mar 28, 2016

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

jonnymd commented Mar 28, 2016

+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

This comment has been minimized.

Show comment
Hide comment
@willemmulder

willemmulder Jun 30, 2016

@ariya Is there any update on this?

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

willemmulder commented Jun 30, 2016

@ariya Is there any update on this?

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

@gunzip

This comment has been minimized.

Show comment
Hide comment
@gunzip

gunzip Dec 14, 2016

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.

gunzip commented Dec 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@michaelfranzl

michaelfranzl Jan 21, 2017

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

michaelfranzl commented Jan 21, 2017

+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

This comment has been minimized.

Show comment
Hide comment
@SHND

SHND commented Apr 6, 2017

+1

3 similar comments
@thowland

This comment has been minimized.

Show comment
Hide comment
@thowland

thowland commented May 21, 2017

+1

@mclavacca

This comment has been minimized.

Show comment
Hide comment
@mclavacca

mclavacca commented Aug 7, 2017

+1

@AdamReece-WebBox

This comment has been minimized.

Show comment
Hide comment
@AdamReece-WebBox

AdamReece-WebBox commented Sep 11, 2017

+1

@jeerbl

This comment has been minimized.

Show comment
Hide comment
@jeerbl

jeerbl Nov 27, 2017

Any progress on this feature?

jeerbl commented Nov 27, 2017

Any progress on this feature?

@ghost ghost removed old.Priority-Medium labels Dec 19, 2017

@ghost ghost removed the old.Type-Defect label Dec 19, 2017

@sameersemna

This comment has been minimized.

Show comment
Hide comment
@sameersemna

sameersemna commented Apr 25, 2018

+1

@theaspect

This comment has been minimized.

Show comment
Hide comment
@theaspect

theaspect Apr 25, 2018

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

theaspect commented Apr 25, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.