'How to download a local created file on button click using reactjs

I am making a service call through ReactJS and using request object I created a excel which is stored on my tomcat server location. Now I want to show this file in chrome downloads when I get back the response and show the file location (downloads location) on footer which we usually get when downloading anything through chrome.

My Reactjs code:

  render() {
        const { excelDownloadUrl } = this.props.productUsers;
        if(excelDownloadUrl!=null){
          window.location.href = excelDownloadUrl; //This is changing the URL, I need to just download the file to my downloads. In excelDownloadUrl I am getting the excel file location
        }
        return (
          <React.Fragment>
        

    <Row>
<Button outline color="info" type="button" onClick={()=>this.List()} style={{ marginLeft: "15px" }}>
                <FontAwesomeIcon icon="file-excel"  /> List //On this button click I need to download, getting the excelDownloadUrl from its response only.
                
              </Button>
                </Row>

This is the response location from which I am taking the file and need to show in downloads.

Can someone please suggest what I need to use to put this file on my download location and show the download on chrome page footer.



Solution 1:[1]

create a link within your return () statement

e.g.

return (

          ...... all your other stuff 
    <a href={excelDownloadUrl} download>Download here</a>

)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Someone Special