Download a file in js

In the above code, we download an image apple. Then we also created a download button to facilitate downloading files. This approach will create text data on the fly and then use JavaScript to create a text file and then download it. Attach an event listener looking for a click to a download button.

In this approach, we will use the Axios library to download files. Blob stands for Binary Large Object and is a data type that can store binary data. This method is not restricted to the plain text entered by the user like the previous method. We can request any sort of data from an API and then use this approach to save data inside our computer.

To trigger a file download on a button click we will use a custom function or HTML 5 download attribute. The download attribute simply uses an anchor tag to prepare the location of the file that needs to be downloaded.

Create an anchor element Set the href attribute of the anchor element to the created object URL. Set the download attribute to the filename of the file to be downloaded.

This forces the anchor element to trigger a file download when it is clicked. You should now see the file you recently downloaded with a date and time. The download attribute specifies that the target the file specified in the href attribute will be downloaded when a user clicks on the hyperlink.

The optional value of the download attribute will be the new name of the file after it is downloaded. Steps :. However, the download attribute only works in modern browsers. Internet Explorer does not support it. The idea is to programmatically create an anchor link, and then trigger the click event. This method is especially helpful for dynamically generated file URLs. Sometimes, you may want to save programmatically generated data as a file using JavaScript. That's where blobs and object URLs are useful.

A Blob object is a file-like object used to represent raw immutable data. Blob objects contain information about the type and size of data they store, making them very useful for storing dynamic contents in the browser. This method is helpful to create an object URL that represents a blob or a file.