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?)
Solution:
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.