Tip: Customize the names of downloadable files

Webdev, HTML, Browser · Jun 12, 2021

HTML5 introduced a variety of convenient features that many of us use every day. As downloadable links aren't something I work with very often, I recently found out that you can use the download attribute on an <a> element for much more than just making it trigger a download. In fact, you can pass it a string value that will act as the name of the downloadable file, effectively allowing you to customize its name:

<!-- The downloaded file will be named 'June-2020.csv' -->
<a href="/data/2020/06/report.csv" download="June-2020.csv">June 2020</a>

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Tips & Tricks

    A collection of quick tips and tricks to level up your coding skills one step at a time.

    Collection · 53 snippets

  • Tip: Lazy load images in HTML

    Did you know you can use a native HTML attribute to add lazy load to images? Learn all you need to know with this quick tip.

    HTML, Webdev · Jun 12, 2021

  • Tip: Prefetching resources in the browser

    Resource prefetching is a great technique to improve perceived page speed on your website and one that requires little to no effort. Learn how to use it today.

    HTML, Webdev · Jun 12, 2021

  • Tip: Create a descending list of numbered items

    Did you know there's an easy way to create a descending list of numbered items with pure HTML? Learn how with this handy tip.

    HTML, Webdev · Jun 22, 2021