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

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>

You can use the inbuilt href prop along with the download prop of MUI Button like this:

<Button
variant="contained"
color="info"
endIcon={<FiDownload />}
href="/resume.pdf"
download
>
 Resume
</Button>

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.

Just add the download parameter to the Button element as in the example below:

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

If file is uploaded from UI then we have to download in the following way

uploaded file:

const data = {
  lastModified: 1701069121191,
  lastModifiedDate: Mon Nov 27 2023 12:42:01 GMT+0530 (India Standard Time) {},
  name: "Template_v2(1).xlsx",
  size: 91827,
  type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  webkitRelativePath: ""
}

download:

const onDownload = d => {
    const link = document.createElement('a')
    link.download = d.name
    link.href = URL.createObjectURL(d) // method creates a string containing a URL representing the object
    link.click()
}

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

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/

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>