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

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

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/

You can also use the

file-saver

package to download your file.

To install it, run:

npm i file-saver

Then you can call the saveAs function from the package by writing:

import React from "react";
import { saveAs } from "file-saver";

export default function App() {
  const saveFile = () => {
    saveAs(
      "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
      "example.pdf"
    );
  };
  return (
    <div>
      <button onClick={saveFile}>download</button>
    </div>
  );
}

The first argument is the URL to download and the 2nd argument is the file name of the downloaded file.

The correct Material UI way is:

import {Button, Link} from '@mui/material'

<Button
    variant="contained"
    color="#ffa726"
    size="large"
    startIcon={<GetAppIcon />}
    component={Link}
    href="./abcf32x.pdf"
    download="How-to-download-file.pdf"
>
    Download Sample Method File
</Button>

According to the docs, I thinks this will work, and in case of using nextjs, don't forget to put that file inside the public folder

<Button variant='contained' component="label">
    <a href="/files/CV.pdf" target="_blank" download>
         Download csv
    </a>
</Button>