{

Multiple ways to download an file or image from a Javascript?


In this tutorial, How to download an file or image from a given url in javascript.

In Web applications, You have an feature download link which downloads the images from an given URL.

You have an anchor link like below

<a href="url">Download File</a>

when user clicks on the link, it download an file from a server url.

There are multiple ways we can do it.

download file with HTML5 example

if image is present in client side or webserver, we can simply use anchor tag with download attribute contains name of the file to be downloaded

<a class="button" href="localhost.com/assets/name.png" download="name.png">Download File</a>

When click on the download link, It downloads the name.png into browser and save to file system.

If the image or file is coming from Server, This will not works, You have to download using client side javascript

Fetch javascript to download an file

fetch is an native browser feature introduced in latest browsers. It is used to fetch the files from a remote server by making network request and returns the response.

  • It returns the response and convert to blob object byte code.
  • It calls and create a url with this byte code
  • Create an anchor inline element and update href to this blob byte code
  • You can update the name of the file to download attribute
  • Add the anchor element to DOM tree
  • Finally initiate click event to download the file like anchor click event

Here is an example code for download file from an given url

      fetch(url)
        .then(resp => resp.blob())
        .then(blobobject => {
            const blob = window.URL.createObjectURL(blobobject);
            const anchor = document.createElement('a');
            anchor.style.display = 'none';
            anchor.href = blob;
            anchor.download = "name.png"";
            document.body.appendChild(anchor);
            anchor.click();
            window.URL.revokeObjectURL(blob);
        })
        .catch(() => console.log('An error in downloadin gthe file sorry'));
}

You can also use async and promises to download files ascyhronous.

Conclusion

In this short tutorial, You learned different ways to download files or images in javascript and html

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

Top 6 In operator examples in Javascript|Typescript|Angular

How to populate enum object data in dropdown in angular| Angular material dropdown example

Best Ways to convert timestamp to Date format in typescript| Angular timestamp date example

How to compare dates in Angular | Momentjs example

Different ways to write a comments in Typescript| Angular Component Comment example

How to set focus on top page in angular|javascript example

How to Convert Array to string,comma,hyphen in javascript