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.

Share this post on…

5 thoughts on “To download this page, click here”

  1. says:

    Android Firefox:
    Downloaded as "downloadfile.html"
    Was prompted to open in Chrome, but no Firefox in the list (default)
    Didn't go further because I refuse to use Chrome unless i have to


What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">