CODEWITHSUNDEEP
javascriptfilereactjsmime-types
Akash Sateesh
Akash Sateesh

Reputation: 812

Download a string as .txt file in React

I have a string which needs to be downloaded in a txt file when click on a button. How can this be implemented using React?

Upvotes: 46

Views: 55618

Answers (2)

Arnab_Ghosh
Arnab_Ghosh

Reputation: 329

For using React with hooks and arrow functions, here's a working example:

const DownloadButton = ({textOutput}: { textOutput: string }) => {
    const file = new Blob([textOutput], {type: 'text/plain'});

    return (
            <Button variant="outlined">
                <a download="sample.txt" target="_blank" rel="noreferrer" href={URL.createObjectURL(file)} style={{
                    textDecoration: "inherit",
                    color: "inherit",
                }}>Download</a>
            </Button>
    )
}

Note: I'm using MUI lib and added some styling to make sure anchor tag dont mess with the styling.

Upvotes: 2

Chris
Chris

Reputation: 59541

Here's a working example. Enter the text in the input field and click Download txt, this will download a txt with the contents you entered in the input.

This solution creates a new Blob object of the text MIME type and attaches it to the href of a temporary anchor (<a>) element which is then triggered programmatically.

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. 

class MyApp extends React.Component {
  downloadTxtFile = () => {
    const element = document.createElement("a");
    const file = new Blob([document.getElementById('myInput').value], {type: 'text/plain'});
    element.href = URL.createObjectURL(file);
    element.download = "myFile.txt";
    document.body.appendChild(element); // Required for this to work in FireFox
    element.click();
  }
  
  render() {
    return (
      <div>
        <input id="myInput" />
        <button onClick={this.downloadTxtFile}>Download txt</button>
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("myApp"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>

This answer was derived from thanhpk's post.

Upvotes: 113

Related Questions