How to Print Website Like It Looks on Screen

Printing a web page so it looks like how it appears on a screen doesn’t always work. Well, the printed website looks messed up, garbled and ugly. It shouldn’t be so hard to just print a web page WYSIWYG (what you see is what you get.)

And it doesn’t matter if you’re printing on paper or saving a web page as a PDF file. 2 websites that I had difficulty saving neatly as a PDF were americanmomentum.bank and goldenvalley.blog/welcome-to-our-new-website.

I’ll explain why later, but here are the solutions I found to save PDF of web pages so it looks right (note: not every item listed here will work for every web page)—

Browser Extensions

• Blipshot (Chrome)
• Bukket (Chrome)
• FireShot (Chrome, Firefox, Opera, IE) (free/$)
• Full Page Screen Capture (Chrome) #opensource
• Marker (Chrome) (free/$$)
• Nimbus Screenshot (Chrome, Firefox, Opera) (also Android, Windows)
• Open Screenshot (Chrome)
• PrintFriendly (Chrome, Safari, Firefox, IE) (also iOS, Android)
• Webpage Screenshot Free (Chrome)

Software Clients

• Greenshot (Windows) (free) #opensource
• Screenshot Captor (Windows) (free/$)
• Snagit Screen Capture Software & Screen Recorder  (Windows/Mac) ($)

Why a Printed Web Page Doesn’t Look Right

Why is this: because web developers now not only have to design their website for different sizes of devices and browsers, but they also may need a separate design for printing, depending on how the stylesheet is designed. Some websites realize that its users would want to print their web pages and  provide a printer-friendly version. But that’s in the minority. The rest of the internet have web pages that may or may not print like it looks on the screen.

This is an on-going discussion that dates back for years. This 2013 discussion thread, WYSIWYG Web Page printing in Mac OS X 10.8, had a comment saying that it’s an industry problem:

This appears to be an industry-wide issue. I only searched for a short time, but there appears to be no solution – with very little acknowledgement that there is  a problem. “Solutions,” as you have seen, tend to be from the coders perspective, talking about the problem from a CSS or HTML  – not plugins for the client side.

At superuser.com, the same question is discussed @ “How to get WYSIWYP (print what you see) in a web browser?” and “Why do my webpages not print what I see in my browser?”

That’s why you and I have to go searching for a solution to fix this so we can print a web page or save a PDF version that looks like it does on screen, or at the very least, to be legible and readable.