How to download file in react js – React Download Link

In this post we are going to have a look at one of the rarest and simple thing in react React Download Link .

React download link is simple component to download data from a client side cache. Example for Client side cache are flux, redux.

Either we can download data from client side cache or we can fetch data from provided URL.

Install with :

npm install --save react-download-link
npm i react-download-link


 import DownloadLink from "react-download-link";

react-download-link component mainly have following props.

label : The name/label on browser page.

filename : downloading file name.

exportFile : function to get file content to be downloaded.

The component will default to an anchor tag, but the tagName prop will accept a string of any other HTML tag you prefer, such as ‘button’.

Examples :

  1. React download link for client side cache data
    exportFile={() => "Client side cache data here…"}

2. Download link for client side cache data with Promises

    label="Download with Promise"
    exportFile={() => Promise.resolve("cached data here …")}

3. Download link for data from URL with Promises

Function to Fetch data from URL

 getDataFromURL = (url) => new Promise((resolve, reject) => {
        setTimeout(() => {
                .then(response => response.text())
                .then(data => {
    }, 2000);

DownloadLink component calling Fetch function

          exportFile={() => Promise.resolve(this. getDataFromURL (url))}
Other React Tutorials