Material-UI: how to download a file when clicking a button

Question

I know how to download a file when clicking a button using html

<a href="./abcf32x.pdf" download="How-to-download-file.pdf">
    <button>Download File</button>
</a>

But using Material-UI component how can I do this

I have the following component

<div>
  <Button
    variant="contained"
    color="#ffa726"
    size="large"
    startIcon={<GetAppIcon />}
  >
    Download Sample Method File
  </Button>
</div>

Now I want to download a file whose url is http://localhost:8000/static/sample_method.py

I don't want to open the link in browser and then do save as, rather it should get downloaded directly.

Answer 1

You already had your answer in the question. Instead of declaring a element with an href and download attribute using JSX syntax. Create that a element and click it programmatically:

function App() {
  const onDownload = () => {
    const link = document.createElement("a");
    link.download = `download.txt`;
    link.href = "./download.txt";
    link.click();
  };

  return (
    <Button onClick={onDownload} variant="contained" color="primary">
      Download
    </Button>
  );
}

Live Demo

Answer 2

You can use the onClick event handler of the button to get the event callback and utilize the following code from the following link to download the file.

https://codesource.io/how-to-download-file-in-javascript/