Create links that download files rather than display them
It’s interesting how some things come full circle.
Then, browsers became so advanced that they were able to open nearly any file in real-time.
That created a problem for developers, though.
How would you force a web client to download a file, instead of opening it?
A bunch ofhacksand workarounds sprung up to solve the issue, but none were a true solution.
That all changed withHTML5when theDownload Attributewas introduced.
There are a few different ways that you’ve got the option to handle the Download Attribute.
Each has its own benefit, and they all work smoothly across different browsers.
You don’t need to include an additional file name or any supporting information.
In this instance, the online window 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’re free to standardize things with the Download Attribute.
To specify a file name, set the download attribute equal to it.
Exclude the file extension.
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.
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’re free to 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.
