2

How do I print a webpage exactly as I see it in my browser.

For example, when I try to print the below webpage then the print preview shows the webpage's text in some weird characters instead of English: https://photographylife.com/what-is-aperture-in-photography#what-is-aperture

enter image description here

I changed the rendering setting to "print" and "screen" options in Chrome Developer tools as mentioned in https://superuser.com/a/1271790/886900 but it did not resolve the issue.

Edit1: I have the Chrome browser version "Version 79.0.3945.130 (Official Build) (64-bit)". I found that when I used this in MAC Catalina then I had the issue of weird characters but when I tried to print the same URL in the Windows10 machine then I did not have this issue. I do not know what is the difference here, it would be nice if someone can point out how to make it work in MAC as well

firstpostcommenter
  • 141

3 Answers3

2

Use Ctrl-PrtSc to copy the screen to the clipboard. In Windows Paint you can then paste the image (Ctrl-V) and print.

Cris Graue
  • 21
1

My best guess to tackle the problem is:

  • Open the Developer Tools (Ctrl+Shift+I on Linux/Windows)
  • Find the Device Toolbar (Ctrl+Shift+M on Linux/Windows)
  • Remove the tick at "Auto-adjust zoom" in the zoom dropdown (probably the one showing "100%")
  • Setup the page as you wish regarding the width (can make a difference on responsive sites)
  • Choose "Capture full size screenshot" from the three dot menu in the Device Toolbar.

Using this procedure will create a png in your download folder, which (in best case) looks exacly like what you saw on screen. Doublecheck that before printing, as the results can be really odd sometimes and capturing may consume long time. I am pretty sure, this is not exactly what you aimed for, but it's the best I can come up with. It works with Chrome 79.0.3945.130, but fails with Chromium 73.something.

I appended the results (good and bad case) of your provided site to this post (both truncated to match the imgur requirements of <2MB).

MP Felder
  • 31
0

There are multiple proposed answers to this question online using the "Developer" menu to change Rendering/Emulator settings to "Screen" but few of them work for content that is interactive or may have strange @media styles. Other solutions discuss various plugins (Greenshot, Webpage Screenshot, PrintFriendly, etc.).

One Chrome 2024 workflow I use that does not require plugins or screenCSS rendering options is the following:

  1. Click "File" menu
  2. Click "Save Page As..."
  3. Change Format to "Webpage, Single File"
  4. After saving file, open and print (or save as PDF)

Hope that helps!

Sparebrain
  • 1