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