How to get WYSIWYP (print what you see) in a web browser?
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.
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:
Source Print stylesheet - the definitive guide
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.