How to Download a Image in React
In this post we will give you information about How to Download a Image in React. Hear we will give you detail about How to Download a Image in ReactAnd how to use it also give you demo for it if it is necessary.
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:
Install the file-saver package using npm install file-saver command.
Import the saveAs function from the file-saver package.
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> );}Hope this code and post will helped you for implement How to Download a Image in React. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs