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 and


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

Software Clients

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, 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.

how to embed viewer for PDF uploaded to Google Docs

This one was rather elusive. I finally found the solution in a side window that shows up when viewing a PDF file within Google Docs, i.e.…

In the right sidebar, there’s a little window with embed code that has HTML code like this:


So if you’ve got a PDF file you’ve uploaded to Google Docs, and can’t get it to show using the Google Docs Viewer generator at . The code you’d use is like this — note: replace srcid with your PDF document’s ID.


That should do it. You can change the width and height as you’d like.

[aside: wasn’t able to figure out how to post HTML code in a Posterous post, so had to use images, which means you’ll have to carefully type out the cryptic embed codes, sorry]