Download a string as .txt file in React Download a string as .txt file in React javascript javascript

Download a string as .txt file in React


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>