How do I save these web pages for my portfolio?

April 6, 2012 11:45 AM

How do I convert a web page to a PDF? If that doesn't work, how else can I archive the sites for my portfolio?

I am creating a portfolio for my upcoming job hunt. I want to include the many Web sites I've created. What I really want is to have PDFs that display the website exactly as I see it in browser, right now.

I'm encountering x problems:
1. when I save the web page, it loses either the PHP or the javascript or something, so it looks completely different than it should.
2. When I print->cutePDF, it only prints out the "printable region" section, which, for some reason, is only the content, and not the entire web page. (this is set by the university I work for, and I don't think I can control that.)
3. I don't want to hotlink to these pages, because after I am gone, someone might change them. It would be possible for me to create a mirror of some of the pages, but not all of them. also, there's no guarantee that that would not be deleted, and also it would take too much time.

Any advice or suggestions?

posted by rebent to computers & internet (9 answers total)

Just do a screen capture. Don't bother with pdf printing.
posted by damn dirty ape at 11:48 AM on April 6, 2012

Are you on a mac? Screenshot, save to clipboard, open in Preview, save file.

Naturally you can do the same thing on a PC.
posted by oneirodynia at 11:49 AM on April 6, 2012

How about use something like this (Chrome add-on) or this (Firefox add-on) to do a full webpage screeshot?
posted by brainmouse at 11:49 AM on April 6, 2012 [1 favorite]

There's a bunch of screenshot programs that screenshot a full web page, not just what's on screen. Here's a list of 5 of them. That first one is a web service, here's Metafilter, but note the weird fonts.

Alternately you can "save as web page complete" or the like in your browser. That gives you not only the HTML file, but all associated javascript, images, css, etc in a folder. That generally works but if the site does AJAX-like dynamic tricks it may not.
posted by Nelson at 11:50 AM on April 6, 2012 [1 favorite]

(What those add-ons do that the built-in screenshot programs don't is get the whole page even if it's too long to display on your screen)
posted by brainmouse at 11:50 AM on April 6, 2012

Thanks Brainmouse, that's just what I am looking for!
posted by rebent at 11:53 AM on April 6, 2012

On Firefox in Windows, I use the PDFit extension. It creates seamless PDFs or PNGs of the entire web page or just the area visible in the window.
On a Mac, I use the app Paparazzi.
posted by emelenjr at 12:09 PM on April 6, 2012

When I print->cutePDF, it only prints out the "printable region" section, which, for some reason, is only the content, and not the entire web page. (this is set by the university I work for, and I don't think I can control that.)

The output of this operation will also be governed by whatever media-specific CSS you may have. Check to make sure you're not specifying an alternate style sheet for printed media (and if you are, you may want to include printer-friendly output in your portfolio because it shows how flexible your designs can be)
posted by RonButNotStupid at 12:33 PM on April 6, 2012 [1 favorite]

If you're handy with the command-line:

How to: Convert Site to PDF With Wkhtmltopdf and Wget
posted by Blazecock Pileon at 1:02 PM on April 6, 2012