To download this page, click here

💾 Download this page!

What's going on behind the scenes?

Here's the code. Note - it doesn't require thousands of imported NPM libraries, a complex Docker set-up, or any AI-on-the-blockchain.

<a href="" download="this.html">Download this page</a>

HTML 5 introduced a new attribute for the anchor element - download.

Rather than having to set your server up with Content Disposition headers - you can tell the browser that a click should result in a download, rather than displaying the contents in the browser.

This is usually used for things like downloading images. For example:

<a href="/pictures/kitten.jpg" download>Download a kitten photo!!!</a>

The mere presence of download in the anchor tells the browser to open up the "save" dialogue.

If you add a value to the attribute, you can tell the browser what the file should be called:

<a href="/6f12ec75-c4ff-401e-a542" download="puppy.png">Download a random puppy!</a>

If the href value is empty, the browser understands that to mean "the current page". When combined with download - the browser requests the page and delivers it as a download.

Why is this useful?

At work, we were discussing how we could a "Download this page" link to pages. Normally, it would have involved telling the user how to use File ➡ Save As on a variety of systems. Or reconfiguring the back-end so that adding a GET parameter to a URl would trigger a download.

But, with this little scrap of code, we don't need to change anything. It's an extra line of HTML somewhere on the page.

It's a pity there's no way to automatically in-line all the content of a page to make a self-contained asset. There's a feature request on Chromium to make this possible. But, for now, it works really well for downloading pages which are mostly text.

🛈 Please don't use the phrase "Click Here" on your links.