To download this page, click here
browsers HTML5 · 5 comments · 400 words · read ~1,877 times.
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.
HTML
<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.
It downloaded an mthml file, though the format wasn't recognised when I clicked on it! (Android Chrome running on Android Go 8.1.0. I'm on a low spec device!)
Downloaded a 78k HTML file called 'this.html', which opens normally in Brave on macOS and looks about right
Yes, it downloads (Chrome on an Android 12 phone) and when I then open the downloaded file it displays this:
Yes, Android, pixel 6. Works well!
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