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.

score 6 · Answer 1 · answered Mar 26 '21 at 10:36

6

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

answered Mar 26 '21 at 10:36

NearHuscarl

66,950
18
261
230

this only works when the content-description has attachment – Santhosh Mar 30 '21 at 00:59
Do you know why this is not working? https://stackoverflow.com/questions/68666135/trouble-downloading-a-file-from-react-failed-no-file @NearHuscarl – 325 Aug 05 '21 at 13:17
@325 if you're using CRA, try putting the asset (the file to be downloaded) in the public folder – NearHuscarl Aug 05 '21 at 13:36
What is CRA? @NearHuscarl – 325 Aug 05 '21 at 13:36
```import React from "react"; import Button from "@material-ui/core/Button"; export default function DownloadFile() { const onDownload = () => { const link = document.createElement("a"); link.download = `testDownload.txt`; link.href = "./files/testDownload.txt"; link.click(); }; return ( ); } ``` @NearHuscarl – 325 Aug 05 '21 at 13:42
@325 create-react-app. Are you using webpack? can you put your code on codesandbox or github so everybody can see and reproduce the problem? – NearHuscarl Aug 05 '21 at 13:44
I made a folder called "files" within my public folder. I placed my testDownload.txt in the folder, but when I click my Download button, I still get "Failed - No file" – 325 Aug 05 '21 at 13:44
https://github.com/dte324/machine/tree/dte324-patch-1 @NearHuscarl – 325 Aug 05 '21 at 13:47
It work on Chrome on MacOS but it doesn't in Chrome on iPhone while the simple `a` tag with the `download` attribute works. – KaMZaTa Apr 08 '22 at 01:18

abdelrahman aboneda · Answer 2 · 2022-09-12T16:16:19.077

3

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>

edited Sep 12 '22 at 16:16

answered Sep 12 '22 at 16:14

abdelrahman aboneda

176
1
4

score 0 · Answer 3 · answered Mar 26 '21 at 05:35

0

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/

answered Mar 26 '21 at 05:35

ahmed

540
2
18

unfortunately it opens the download link in the browser (eg: image) instead of saving it – Santhosh Mar 26 '21 at 08:57
It should be a full download link, then it shall download it. – ahmed Mar 26 '21 at 19:28
It shall not. The link might be a link to page. See this example here to download an image. https://codesandbox.io/s/66811401reactjs-material-ui-how-to-download-a-file-on-clicking-a-button-forked-9y4ej?file=/index.js – ahmed Mar 26 '21 at 19:31
I think it has something to do with the url. For your url works. Can you check this url -- `https://secure.gravatar.com/avatar/dde881ee7846ed21119d52f60dea7053` – Santhosh Mar 26 '21 at 23:06
Yes, I did wget https://secure.gravatar.com/avatar/dde881ee7846ed21119d52f60dea7053.jpg and output is in next comment. Server do not allow the image to be download, – ahmed Mar 26 '21 at 23:57
StatusCode : 200 StatusDescription : OK Content : {255, 216, 255, 224...} RawContent : HTTP/1.1 200 OK Connection: keep-alive Link: ; rel="canonical" ... ; rel="canonical"], [Content-Disposition, inline; filename="dde881ee7846ed21119d52f60dea7053.jpeg"] – ahmed Mar 26 '21 at 23:59
ok, i got it. Currently i used `js-file-download` and `axios`. it downloads the file irrespective of the headers. https://stackoverflow.com/a/64002765/2897115 – Santhosh Mar 27 '21 at 01:27
Awesome. !! what headers did you used ? – ahmed Mar 29 '21 at 20:06

score 0 · Answer 4 · answered Jun 18 '22 at 17:07

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.

score 0 · Answer 5 · answered Jun 18 '23 at 15:53

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>

score 0 · Answer 6 · answered Jul 29 '23 at 13:44

0

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>

answered Jul 29 '23 at 13:44

DooMGuy096

252
1
2
12

score -1 · Answer 7 · answered Jul 27 '22 at 08:46

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>

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

7 Answers7

Live Demo