Now, developers can add a special download attribute to their HTML anchor tags to tell browsers to treat a link as a download, rather than opening the target file. There are a few different ways that you can use the Download Attribute to control the way browsers handle your download links. Even better, all modern browsers support the Download Attribute, so you shouldn’t see any issues with compatibility or the need for a fallback. There are a few different ways that you can handle the Download Attribute. Each has its own benefit, and they all work smoothly across different browsers.
The Plain Download Attribute
The simplest way to use the Download Attribute is to just include it in its most basic form in your anchor tags. You don’t need to include an additional file name or any supporting information. The result looks like this: By including “download” you’re telling any browser reading the page to download the target link instead of opening it. In this instance, the browser will download the file exactly as it is with the same name. The user will see the following Save box.
Changing the File Name
What happens if you actually want to change the name. There are plenty of occasions where you’d want to do this. Automatically generated file names are a good example. They usually have ridiculously long names with strings of garbage characters. That’s not the experience you want for your visitors. You can standardize things with the Download Attribute. To specify a file name, set the download attribute equal to it. Exclude the file extension. The browser can’t and won’t convert the file type, so there’s no sense in trying. Your visitors will download the file as your-file.pdf.
Downloading an Image
Along with this comes a simplified way to let your users download images directly. This isn’t revolutionary, and you can probably piece it together yourself, but you can use the download attribute to create a downloadable image link. Start by setting up an image like you normally would on your page. This, of course, will be the image that’s available for download. Then, encapsulate the whole thing in an anchor tag, linking to the image path. Finally, add in the download attribute to your anchor tag. You can change the name of your image if you like. Then, encapsulate the whole thing in an anchor tag, linking to the image path. Finally, add in the download attribute to your anchor tag. You can change the name of your image if you like. Now, when a visitor clicks the image, they’ll automatically download it directly from your server. It’s not necessary, and it might seem like overkill to a developer, but how many site visitors would think to right-click on an image to view or download it?
