Html download attribute opens file

Question: What would be use case for this? Isn't it logical to name your file how you want it to be downloaded? My response: Yes, that would be ideal. But sometimes you might have a custom file naming convention you need to follow which might not makes sense for the user. Neat tip! Here, the href points to a razor page named MonthlyReport.

So, when you click on this link the browser won't navigate to the razor page, rather it will prompt the use to download it's response. The above razor page displays a list of image files from Images folder placed under wwwroot. Each link points to the image file under consideration using its href attribute. You can then download the images by clicking on their links. Add a razor page Index. The above code shows the Index page model class with ImageFiles property.

This property is assigned a value in the OnGet method. The code then gets a list of files from the Images folder. This is done using Directory. GetFiles method. Note that the Select method picks only the file names skipping the folder information. We do this because we don't need complete physical path of these files.

Notice the code marked in bold letters. The code iterates through all the image files from the ImageFiles page model property. The download attribute sets a different name to be displayed in the file download dialog. The download name adds a date stamp to the original file name. Now run the Index page in the browser and try clicking on any of the links.

You will be prompted with a file download dialog. The download attribute can also be used in situations where some kind of content such as images, CSV, or XML is being generated in the browser dynamically. Suppose you are using HTML5 canvas to draw some graphics in the browser. Connect and share knowledge within a single location that is structured and easy to search.

The attached code doesn't seem to download the file, instead, it opens it. Your code is correct, however, the download attribute only works when you are viewing the code from a server, due to the same-origin policy of most browsers.

Are you previewing the file by double-clicking the file or directly opening it up in a browser? If so, you should run your code from within a localhost setup to test. That may involve running a server locally, or using an editor extension to spin up a project-based server.

Either way, whether it is a plain static website with local files or being served by a server, you might need to check the href again to make sure it is correct. Edit after question update: Yes answer by Riley is right: it will only download if you are using a server. You could use a server like Node. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.

While using W3Schools, you agree to have read and accepted our terms of use , cookie and privacy policy. Copyright by Refsnes Data. The download attribute specifies that the target will be downloaded when a user clicks on the hyperlink.

The value of the download attribute will be the new name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file.