Download a file on button click in React
In this post we will give you information about Download a file on button click in React. Hear we will give you detail about Download a file on button click 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 file on button click in React with the help of an example.
Downloading a file
To download a file on button click, wrap the button element in a <a> tag and add the download attribute to the a tag. So it creates a download link.
Here is an example, which downloads the following twitter image when a user clicks on the button:
import React from "react";export default function App() { return ( <div className="App"> <a href="/img/twitter.png" download> <button>Dowload image</button> </a> </div> );}Similary, you can create a download link for the pdf files like this.
<a href="/files/my-tax.pdf" download>Download Tax Data</a>
Adding the new filenames
We can also add the new filename to a downloaded file by adding a value to the download attribute.
Example:
import React from "react";export default function App() { return ( <div className="App"> <a href="/img/fb.png" download="facebook"> <button>Dowload image</button> </a> </div> );}Now, our new downloaded filename will be facebook.png instead of fb.png.
Hope this code and post will helped you for implement Download a file on button click 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