Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

dachshundx

macrumors member
Original poster
Feb 13, 2016
42
4
Using "Export as PDF..." does not render the page correctly 90% of the time. Anyone know of an easy way to take a full-page screenshot of a webpage on Safari?
 
Using "Export as PDF..." does not render the page correctly 90% of the time. Anyone know of an easy way to take a full-page screenshot of a webpage on Safari?
in OSX, Go to Finder/Applications/Utilities
Grab will allow you to take a portion or the whole of the screen.
Very Useful.
 
Grab or cmd-shft-3 (or variations) to capture the screen. Use cmd- (cmd minus) to get more of the content on the screen.
 
cmd-shft-4 brings up cross hairs so you can select a part of the screen, it then saves a file to your desktop of the screen grab. I prefer the screen grab to go to clipboard, so I can just paste it where I need it, rather then clutter my desktop with lots of screen grab files. By default, getting it to clipboard is Cmd-ctrl-shift-4...which is a struggle with my big hands. In order to make this easier I changed the keyboard shortcut by...

System Preferences / Keyboard
Then click on the 'Shortcuts' tab
Select 'Screen Shots' on the left hand side
It shows you the four different options available...you can re-assign the key combination shortcut so your favourite one is easy to remember. To do this, just click where the bit of the screen where the current shortcut is shown and press you new key combination to reassign it.

I used to use Grab, but this shortcut is now my preferred method as it's much quicker.
 
Anyone know of an easy way to take a full-page screenshot of a webpage on Safari?
Depends on what you want. If you want a screenshot of what you can see on your screen then Ctrl/Shift/4(no need to use Grab) will give you the crosshairs. If you position those crosshairs on the Safari page and tap the Spacebar, the crosshairs turn to a camera and the whole Safari window is highlighted. Click the mouse and you have your whole page screenshot.

Using "Export as PDF..." does not render the page correctly 90% of the time.
If you want the whole of this webpage including all the background colours, then in the Print Dialogue box tick the "Print Backgrounds " option.

Also, the formatting of the PDF will depend on how wide the Webpage is and the paper size of your PDF. Again, you can adjust that in the Print box.
 
  • Like
Reactions: moxylady
Taking full-page screenshot is not an easy task. Printing to PDF fails most of the times. macOS Grab app (Cmd+Shift+4) works only on the visible part of the browser window. Third party apps may help, but the one I tried (Web Snapper) produced unreliable results (just try a Macupdate page) and it's no longer supported by developers.

I found that Firefox has a built-in function to take full-page screenshots, which works great. You just hit Shift+F5 (to open Developer Tools) and then click on the Camera toolbar icon. Voilà, your web page screenshot will appear in the Downloads folder. To put the Camera icon on the Developer Tools toolbar, click on the dev.tools settings (gear) icon and turn on "Take a screenshot of the entire page".
 
Last edited:
Using "Export as PDF..." does not render the page correctly 90% of the time. Anyone know of an easy way to take a full-page screenshot of a webpage on Safari?

In the Apple app store you can get this for FREE, I use it all the time: Apowersoft Mac Screen
 
  • Like
Reactions: willmtaylor
Awesome Screenshot inserts spyware and sells your browsing info to third parties. You should uninstall it ASAP.

https://mig5.net/content/awesome-screenshot-and-niki-bot

http://www.thesafemac.com/screenshot-extension-injects-ads/
Yeah... that was nearly 4 years ago. They were removed from Apple & Google extension stores for a while, but returned a year or so ago.

I've run fairly extensive tests on this and it's not doing anything nefarious at all. (Although I must admit that I've not used any of their services for uploading, etc. – I just drag the image to my desktop and close the window).

And to be honest, and I'm not discounting your warning at all—it's a very valid concern, I couldn't care less if any person or company is sold my browsing history anyway. My world is not in ruins if somebody knows I'm searching Amazon for cheap Apple Watch bands. ;)

However, I also have used Paparazzi for a long time and found it to be quite good.
 
Last edited:
Using "Export as PDF..." does not render the page correctly 90% of the time. Anyone know of an easy way to take a full-page screenshot of a webpage on Safari?

Yes, you can do this in Safari or in Chrome. And if you're working in Safari, then you can also configure Safari to simulate an iOS device, so then you can get a full webpage screenshot of how the page would render on iOS.

You don't need extensions.

Instructions here: https://gist.github.com/algal/972c43b533cade4332faf4ec4458fd93
 
... I found that Firefox has a built-in function to take full-page screenshots, which works great. You just hit Shift+F5 (to open Developer Tools) and then click on the Camera toolbar icon. Voilà, your web page screenshot will appear in the Downloads folder. To put the Camera icon on the Developer Tools toolbar, click on the dev.tools settings (gear) icon and turn on "Take a screenshot of the entire page".

Great suggestion, and thank you. I wish I had seen it a year and a half ago when you posted it! Now I can only hope that you see this note so long afterward.
 
  • Like
Reactions: willmtaylor
Yes, you can do this in Safari or in Chrome. And if you're working in Safari, then you can also configure Safari to simulate an iOS device, so then you can get a full webpage screenshot of how the page would render on iOS.

You don't need extensions.

Instructions here: https://gist.github.com/algal/972c43b533cade4332faf4ec4458fd93
I hate to break it to you, but the instructions you linked to doesn't give you full screen screenshots—it gives you a standard screenshot with the page in responsive mode.
 
I hate to break it to you, but the instructions you linked to doesn't give you full screen screenshots—it gives you a standard screenshot with the page in responsive mode.

I'm not sure what you mean but I can clarify what I mean.

When I follow these instructions, they produce a PNG file that shows the entire webpage not just the part of the webpage visible in the browser viewport.

That's all I needed for my purposes, which is to have a single image for printing, annotating, etc..

Going into responsive mode on Safari was necessary to see what it would look like on an iPhone. I don't know if it's 100% faithful to what Mobile Safari would actually produce but it seems to be; it's certainly more accurate than Chrome's attempt.

P.S. By the way, I wrote the instructions myself, so it's possible I was unclear and I'm doing something different from what they describe. If so, sorry!
 
I'm not sure what you mean but I can clarify what I mean.

When I follow these instructions, they produce a PNG file that shows the entire webpage not just the part of the webpage visible in the browser viewport.

That's all I needed for my purposes, which is to have a single image for printing, annotating, etc..

Going into responsive mode on Safari was necessary to see what it would look like on an iPhone. I don't know if it's 100% faithful to what Mobile Safari would actually produce but it seems to be; it's certainly more accurate than Chrome's attempt.

P.S. By the way, I wrote the instructions myself, so it's possible I was unclear and I'm doing something different from what they describe. If so, sorry!
Sorry, I see what you're doing now. I suppose it's close enough to accurate (the desktop vs. mobile rendering in the responsive mode) to be useful.

That being said, that's a minimum of 6 steps to take a screenshot. I find it much easier (for my admittedly simple needs) to click a button in the already on screen toolbar of the browser window. ;)
 
I know this is an older thread, however I just found Google chrome has a few extensions that do what you are looking to do and some of them allow you to save the file as a pdf or png. I am currently using "Full Page Screen Capture" and has been pretty good and stable.

I have one on Firefox also, but I haven't looked for safari.
 
Yes, you can do this in Safari or in Chrome. And if you're working in Safari, then you can also configure Safari to simulate an iOS device, so then you can get a full webpage screenshot of how the page would render on iOS.

You don't need extensions.

Instructions here: https://gist.github.com/algal/972c43b533cade4332faf4ec4458fd93


Dude, you are still helping people here in the future. 2020 checking in and saying thanks, this was way better than what I hoped for. And no extra spyware!
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.