HTML5 <a> Download Attribute
--
For my final project at Flatiron School, I created an app called My Comic. With the app, users create custom online comic books. I thought it would be cool if eventually I add a feature that lets users download their comic book to their computer. This feature of a user downloading something is so common, but I had no idea how to do it. It took lots of googling, but I finally found a way.
You want to see the code? Let me warn you, it’s pretty complicated stuff…
<a href="/images/cheesepic.jpg" download>
How did I not know about this before?! Okay, now that we’re over the shock of how easy this is, let’s walk through it.
<a> download attribute
As you can see, we’ve got an <a>
tag whose href
attribute is set to a file (in this case an image file). The tag has another attribute called download
. The download
attribute tells our program to download the file (instead of navigating to it) when the link is clicked. So in the above example, when a user clicks on the link, a file called “cheesepic.jpg” will be downloaded to their computer (and they will not be navigated anywhere). I’m still getting over how easy this is.
Optional download value
You probably noticed in our example that the download
attribute doesn’t have a value. That’s because the value is optional. If we give download
a value, that value will become the new filename of the downloaded file. Let’s take a look at another example:
<a href="/images/cheesepic.jpg" download="ilovecheese">
When this link is clicked, a file named “ilovecheese.jpg” will be downloaded (instead of “cheesepic.jpg”). Notice that I didn’t include the file extension in the download
value. The browser will automatically detect the file extension and add it to the file. This is all pretty nifty, huh?!
In React
My Comic is built with React, and it was easy to use the download
attribute in JSX. Below is the code from my app. (Don’t mind the super long href
value and the hardcoded download
value. It’s a work in progress…)
<a href={this.props.comicBook.comics[this.state.currentIndex].canvas_url} download="MyComic">Download Page</a>
Easy peasy!
Cool, but not quite what I need…
I’m so happy I discovered the download
attribute! I incorporated it into My Comic so that the user can download a page from their comic book.
However, this isn’t quite what I want. How annoying will it be for the user to have to download their comic book one page at a time, then merge all the pages together into one file. What I really want is a way to create a pdf file of all the pages which the user can download. So far my googling skills haven’t gotten me the answer I’m looking for, but I know I’ll figure it out eventually. For now, I’m happy with the awesome download
attribute!
I got my info from this helpful W3Schools reference:
https://www.w3schools.com/Tags/att_a_download.asp
If you’re looking for a little JavaScript action, check out this reference:
https://www.w3schools.com/Jsref/prop_anchor_download.asp