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>