How to save a web page snapshot with all its eleme

Question

How is it possible to programmatically save a web page snapshot with all its elements (css, js, images, ...) into one file?

I need to archive some web pages regularly. However, just saving their HTML code is useless - not only because of images missing but esp. because the absence of CSS on today's pages can turn a web page into unrecognizable mess.

I remember the .mht format that worked like this, but that required manual saving, and it was just a feature of IE. I believe there is an open-source solution that can achieve this programmatically, but despite hours of searching I cannot find it on the web.

Answer 1

I think @reisio (+1) has you covered...

...But if only to plug a great free tool, I would point out the Firefox extension Save Complete, which does an admirable job of grabbing "complete" pages on an ad hoc basis. The output will be a single HTML file with an accompanying directory stuffed with all the resources - you can easily zip them up for archiving.

It's not without fault - I've had issues with corrupted .png files lately on OSX, but I use it frequently for building mockups off of live pages and it's a huge time-saver. (Also of note, it hasn't been updated for FF 4 yet, and is the sole reason I rolled back to 3.6)

Answer 2

If you are using Google Chrome just use the save page as menu entry (CTRL + s), and select complete website from the options at the bottom of the file dialog. This save the HTML and all required resources (in a separate folder).

Answer 3

HTTrack, -%M