98

When I print a web page from my browser, I expect to get on paper exactly the content I'm seeing in the browser. To be precise: I expect the browser to render the same page contents the same way, except on a canvas with infinite height, and then decide in a printing-specific way how to distribute the results across physical pages of paper.

However, that is not at all what is happening on many websites. They may print something completely different. I never asked for browsers to do this and I don't want it to happen.

Is there a way to get what I want (other than taking screenshots, painstakingly cutting and pasting them together, and printing the resulting images)? Is there a way to tell a web browser I use (Firefox, Chrome, Safari, IE, or Opera): "print this page as you would render it on an arbitrarily high browser window"?

(PS: see also: Print From Browser Using Screen CSS?)

Improve this question
10
  • 1
    possible duplicate of Print From Browser Using Screen CSS?
    – Ƭᴇcʜιᴇ007
    Nov 28, 2014 at 15:37
  • 1
    Print stylesheets are fundamentally useful. When I print this page for example, do I want the question and answers or do I also want the title, the related question and the footer? I'd also appreciate that all comments are visible. Websites are interactive, pieces of paper aren't (most of the time), and those stylesheets can help to focus on the content, saving you ink and paper.
    – SBoss
    Nov 28, 2014 at 15:59
  • 2
    @SBoss: Not everyone who prints a page will be interested in the same things. I would suggest that a print-friendly page should let a user select what things should be printed, and have the print version match the screen version except--typically--for the controls that show what will print (there should be an option to enable and disable them in printouts, but they should generally appear on screen anyway).
    – supercat
    Nov 28, 2014 at 23:54
  • 1
    As to the question being a duplicate: I tried stripping out the print stylesheet prior to printing, and it doesn't work, so I don't think the question is a duplicate.
    – reinierpost
    Nov 29, 2014 at 22:53
  • 1
    @reinierpost you seem to carve out my thoughts about printing in the year of 2016 and put them down in words. There must be a way for the browser to implement the manual process of taking screenshots and by repetition (no thought process needed) print out a series of images.
    – Anders Lindén
    Jan 5, 2016 at 16:33

8 Answers 8

Reset to default
71

Chrome has this feature built into the Developer Tools, but in a very non-obvious location.

  • Open the Developer Tools (Windows: F12 or Ctrl+Shift+I, Mac: Cmd+Opt+I)
  • Click the Customize and control DevTools hamburger menu button and choose More tools > Rendering settings (or Rendering in newer versions).
  • Check the Emulate print media checkbox at the Rendering tab and select the Screen media type.

Quoted mostly from this answer. See below for the difference.

Now when you print, the print out will be exactly what you see. Make sure to keep the developer tools open until you print. Once you close the developer tools the Rendering setting will be reset back to normal.

Note: Inspiration for this answer came from https://superuser.com/a/568847/176146. But the actual text of this answer is from lmeurs' answer. It is almost exactly the same, but we are trying to do the exact opposite of their answer, so instead of setting the override to Print it is set to Screen.

Improve this answer
14
  • Firefox has obtained this feature in the last year as well. This is obviously superior, but should I un-accept an old answer for that reason?
    – reinierpost
    Nov 26, 2017 at 17:07
  • @reinierpost it is of course up to you. But the the following might be helpful in your decision - meta.stackexchange.com/q/93969/226780
    – Jade
    Nov 26, 2017 at 17:39
  • 3
    Works for me in Chrome 76 with: DevTools > [...] > More tools > Rendering > Emulate CSS media > screen
    – JeremyDouglass
    Sep 26, 2019 at 18:24
  • 4
    For anyone looking into this, in Chrome 102 the option is "Emulate CSS media type".
    – Martin Argerami
    Jun 14, 2022 at 21:09
  • 1
    Didn't work for me after changing "Emulate CSS media type" to "Screen" in Chrome 107. Can someone update the answer?
    – thyu
    Nov 2, 2022 at 3:05
26

Why do my webpages not print what I see in my browser?

The reason some of your web pages are printing differently is because they have a print stylesheet.

What is a Print Stylesheet?

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we're left with web pages that frustratingly don't properly print on to paper.

It's remarkable that so few websites use print stylesheets as:

  • Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
  • They're phenomenally quick and easy to set up

Some websites do offer a link to a print-friendly version of the page, but this of course needs to be set up and maintained. It also requires that users notice this link on the screen, and then use it ahead of the regular way they print pages (e.g. by selecting the print button at the top of the screen). Print-friendly versions are however useful when printing a number of web pages at the same time such as an article that spans on to several web pages.

Source Disable Print Stylesheets (CSS) When Printing a Website

How Do I Disable a Print Stylesheet?

I recently needed to get a snapshot of a website exactly as it is shown on my screen. That is, I wanted the background color, I wanted the ads, I wanted the full layout.

One option is to take sequential screenshots as you scroll down the page, then piece them back together in Photoshop. This is time consuming and leaves you with a low-resolution (72dpi) image.

Another way to do this is to Print the page, then "save as" a PDF instead of actually printing. This works quite well for pages that do not define a different layout for printing a page versus viewing the page.

Unfortunately for me, it has become increasingly popular to include a "print" stylesheet on a website, which defines new page styles when a user tries to print the website. This is defined in the header and looks something like this:

I have found only one option that truly addresses my needs: The "Web Developer" add-on / extension developed by Chris Pederick.

With this plugin you can very easily disable ALL styles, Default styles, inline styles, embedded styles, and, you guessed it, print styles!

It is currently available for Firefox and Chrome. I truly hope a Safari extension will come some day, as I primarily use Safari. The only option I have found for Safari is to disable ALL styles - a feature that comes by default with the newest version (5.0.3) of the browser. This is useful during development to see how your site will be viewed on a text-only browser but without the ability to select which styles you're disabling it has limited utility.

Here is an example of disabling print styles with the above extension in Firefox:

enter image description here

Source Print stylesheet - the definitive guide

Improve this answer
17
  • 4
    Thanks, but this doesn't help for the website I tried it on (trelloprinter.com). I'm amazed how these people have the guts to write that "frustratingly, so many websites don't implement them" when they are a fundamentally broken approach to the problem they're trying to solve. Having separate stylesheets for printing means you failed user interface design 101, or never took it in the first place.
    – reinierpost
    Nov 28, 2014 at 13:31
  • 1
    Perhaps ScreenshotCaptor will do what you need to achieve ... amongst other things it will capture scrolling regions ... but I seem to recall it doesn't play too well with Google Maps.
    – DavidPostill ♦
    Nov 28, 2014 at 13:47
  • 1
    This won't help much. If you are using IE (I know, save your rocks for later), you can use Greenshot (getgreenshot.org) which has an option to scroll the IE page and take printscreen of it. It will assemble the whole page into 1 screenshot. You can then edit it to your heart's wish.
    – Ismael Miguel
    Nov 28, 2014 at 18:32
  • 18
    @reinierpost "Having separate stylesheets for printing means you failed user interface design 101" - That's an awfully wide brush you're painting with there. Are you telling me that if you printed out this page, you'd want to have the Hot Network Questions on the side, or information about chat rooms? Some parts of a page are only useful in an interactive context - why waste space and ink printing them?
    – Chris Hayes
    Nov 28, 2014 at 21:09
  • 4
    @reinierpost What a ridiculous statement. Suppose a site has a dark background with a light foreground. I won't speak for you, but I personally am happy that the browser has its own print styles as well as many sites, so that I don't waste all my ink when I print. There are plenty of reasons why you want to print the content itself, and not a screenshot.
    – Brad
    Nov 28, 2014 at 21:55
12

A no plug-in solution for Firefox: Open Web Developer Tools, in Default Developer Tools (gear icon) tick "Take a screenshot of the entire page." You only need to do this part once.

Then in Developer Tools, click the camera icon. The entire page will be saved as a .png. From here you can print it, convert to pdf, etc.

Improve this answer
5
  • Wow .. that is exactly what I was looking for. Thank you!
    – reinierpost
    May 9, 2017 at 15:24
  • 7
    This feature no longer requires Developer Tools! At the right side of the address bar, select the three dots, click "Take a Screenshot", then select "Save full page".
    – numbermaniac
    Oct 30, 2018 at 0:39
  • This is amazing, thank you!
    – codingjeremy
    Jun 12, 2019 at 22:44
  • For Chromium-Browsers you can do the same opening opening the developer mode > CMD + SHIFT + P > type "screenshot"
    – themenace
    Dec 8, 2021 at 15:13
  • These days, in Firefox the screenshot option seems to reside in the context menu.
    – Raven
    Oct 16, 2023 at 7:19
9

I am using the Chrome extension: Webpage screenshot. With two click's the complete webpage is converted to jpg or pdf. No need to glue the screenshots together yourself any more. This page looks like this: Webpage screenshot demo

Improve this answer
3
  • 2
    This appears to work, too. I was hoping the PDF would give me scalable graphics, but it's just a bitmap.
    – reinierpost
    Dec 17, 2014 at 14:21
  • 1
    What an awesome way to prove your answer! :) I would have accepted this one as the Answer..
    – Vijay Chavda
    Jun 22, 2017 at 15:46
  • Amazing extension! It seems to create pdf in landscape mode. Is it possible to create pdf in portrait mode? @reinierpost
    – user674669
    Dec 5, 2018 at 19:17
3

I was also facing the similar problem. Currently I'm using Print Friendly and PDF Extenstion for Chrome.

Best feature is I can manually delete the items which I don't want in my Print/PDF.

Improve this answer
3
  • Interesting ... in Firefox, I use the PrintWhatYouLike bookmarklet for this purpose. It works well, but it doesn't handle "infinite" scrolling (e.q. Quora) - neither does this extension.
    – reinierpost
    Feb 24, 2017 at 10:09
  • Nice tip - thanks! By default it keeps the text as text, links as links and shows images as full size. A 6 page travel article with several large pictures is now an immaculate PDF at 500kb.
    – Mike Honey
    Apr 27, 2017 at 12:15
  • nice. for a more permanent solution, im using the stylebot extension, to transform grey text to black text, and to remove unwanted content (ads, "share on social media" buttons, "please donate" blabla, headers, footers, sidebars, images, ...). in a perfect world, website admins would fix their pages, but for that we can wait long. meanwhile, we can share our stylebot styles
    – milahu
    Dec 7, 2023 at 10:28
1

Here's another one called OpenScreenShoot. I love it because it's Open source, available at GitHub, and it worked for me for a very long webpage on which, other alternatives like WebpageScreenShot failed.

Improve this answer
1
  • 1
    I think you meant to say "1-click webpage screenshot" instead of "Open Screenshot". Right?
    – user674669
    Dec 5, 2018 at 19:35
1

(At the risk of turning this into a set of Software Recommendations answers, but so far, install and use browser extension X seems to be the only kind of answer that actually works:)

Lately I've been using the Open Screenshot Chrome extension for this purpose, and I'm very happy with it. It had no problems with a long Quora page.

Update (November, 2017): this is no longer the best option: Firefox and Chrome now support taking full-page screenshots in their Developer Tools.

Improve this answer
2
  • I think you meant to say "1-click webpage screenshot" instead of "Open Screenshot". Right?
    – user674669
    Dec 5, 2018 at 19:27
  • No. Apparently, they renamed themselves. I'm not sure what to do with this answer.
    – reinierpost
    Dec 6, 2018 at 10:02
1

Today, this can be done in Firefox (I'm using 65.0.2 right now) as follows:

  1. Press F12. The Developer Tools pane will show up.
  2. Near the right upper hand corner, there is a camera icon. To take a screenshot of the entire page, click on it.

In Settings (to access them, click the three dots to the right of the camera icon), you can slightly customize its behavior; by default, it will save the screenshot to your Firefox downloads folder.

If the camera icon is missing, you first need to enable it in Settings.

The screenshot tool in Firefox Developer Tools

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .