How to Download a Image in React

In this tutorial, we are going to learn about how to download a image on button click in React with the help of an example.

Downloading a image

To download a image on button click in React:

1. Install the file-saver package using npm install file-saver command.

2. Import the saveAs function from the file-saver package.

3. Call the saveAs function on clicking a button, it downloads the image.

Here is an example:

import React from "react";
import {saveAs} from "file-saver";

export default function App() {

   const handleClick = ()=>{
    let url = "https://help.twitter.com/content/dam/help-twitter/brand/logo.png"
    saveAs(url, "Twitter-logo");
   }

   return (
     <div className="App">
         <button onClick={handleClick}>Dowload image</button>
     </div>
   );
}

In the example above, if a user clicks on the Download image it runs the handleClick function and downloads the Twitter logo.

The saveAs() takes two arguments, first argument is url of a image, second one is the file name of aimage.

Similary, you can create a download link for the pdf files like this.

import React from "react";
import {saveAs} from "file-saver";

export default function App() {

   const handleClick = ()=>{
    let url = "/files/my-tax.pdf"
    saveAs(url, "Tax-data");
   }

   return (
     <div className="App">
         <button onClick={handleClick}>Dowload Tax data</button>
     </div>
   );
}