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 -
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>
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.