Change the name of your file with download attribute

that the file should be saved as when the user downloads it. This can be useful if the original file name is not descriptive or if you want to give the file a more meaningful name.

To specify the name of a downloaded file, you can use the download attribute of the a element. Here is an example:

<a href="/path/to/myfile.pdf" download="newname.pdf">Click to download</a>

When the user clicks on the link, the file will be downloaded and saved with the name “newname.pdf” instead of the original file name “myfile.pdf”.

The download attribute is supported in modern browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge. It may not work in older browsers.

Here is another example that shows how to specify the name of an image file that is being downloaded:

<a href="/path/to/myimage.jpg" download="newname.jpg">
  <img src="/path/to/myimage.jpg" alt="My image">
</a>

In this example, the image is displayed on the page and can be clicked to download it. When the user clicks on the image, the file will be downloaded and saved with the name “newname.jpg”.

In addition to the download attribute, you can also use the href attribute to specify the path to the file that you want to offer for download. The href attribute should point to the file that you want to download, and the file should be served with the Content-Disposition: attachment header to indicate that it is being offered as a download.

<a href="/path/to/myfile.pdf">Click to download</a>

HTTP/1.1 200 OK
Content-Type: application/pdf
Content-Disposition: attachment; filename="myfile.pdf"

Using the download attribute and the Content-Disposition header, you can offer any type of file for download on your website and specify the name that the file should be saved as.

This site is ad-free and doesn’t use trackers. If you’d like to support my writing, I’d love if you could buy me a coffee.