CODEWITHSUNDEEP
reactjsmaterial-ui
Santhosh
Santhosh

Reputation: 11788

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

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>

enter image description here

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.

Upvotes: 11

Views: 35774

Answers (8)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20098

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>

Upvotes: 0

DhruvK
DhruvK

Reputation: 348

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>

Upvotes: 3

Anderson Martins
Anderson Martins

Reputation: 1

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>

Upvotes: 0

abdelrahman aboneda
abdelrahman aboneda

Reputation: 750

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>

Upvotes: 4

Stanislau Ladutska
Stanislau Ladutska

Reputation: 305

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>

Upvotes: -1

sohaso
sohaso

Reputation: 135

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.

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81400

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

Edit 66811401/reactjs-material-ui-how-to-download-a-file-on-clicking-a-button

Upvotes: 7

ahmed
ahmed

Reputation: 558

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/

Upvotes: 0

Related Questions