47

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.

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?)

  • 1
    possible duplicate of Print From Browser Using Screen CSS? – Ƭᴇcʜιᴇ007 Nov 28 '14 at 15:37
  • The Chrome extension "Nimbus Screen Capture App" can take an image of the entire web page as it's shown on screen (including the part you can't see without scrolling). I.e. it's as if you've taken a series of screenshots and stitched them together, but it's only one button-click. – A E Nov 28 '14 at 15:41
  • 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 '14 at 15:59
  • 1
    @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 '14 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 '14 at 22:53
20

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.

  • 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 '17 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 – Benjamin Nov 26 '17 at 17:39
  • Thanks; those answers say I should change, so I will, even though the previously accepted answer does seem to have been the most helpful answer possible at the time it was written. – reinierpost Nov 26 '17 at 18:55
19

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

  • 2
    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 '14 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 '14 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 '14 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 '14 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 '14 at 21:55
7

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

  • 1
    This appears to work, too. I was hoping the PDF would give me scalable graphics, but it's just a bitmap. – reinierpost Dec 17 '14 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 '17 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 '18 at 19:17
6

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.

  • Wow .. that is exactly what I was looking for. Thank you! – reinierpost May 9 '17 at 15:24
  • 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 '18 at 0:39
2

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.

  • 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 '17 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 '17 at 12:15
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.

  • I think you meant to say "1-click webpage screenshot" instead of "Open Screenshot". Right? – user674669 Dec 5 '18 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.

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

protected by Community Sep 12 '17 at 5:42

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.