Download a string as .txt file in React

Question

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?

• Freeman Lambda: What is your setup?

Answer 1

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.

• Chris: @KevinB, not really. The linked question does not explain the solution, nor is it a question related to react. Marking this as a dupe to that question would not be very helpful to OP nor to future readers. I explain the solution and provide a working sample, which is more helpful than said post. But why don't you mark it as a dupe yourself if you think it is?
• user400654: i was debating on closing it in the opposite direction. as you said, this is a much more useful QA pair.
• Anton Duzenko: For some reason this code does nothing in Firefox for me(
• Robin Larsson: Firefox requires the element to be appended to the body before the click. document.body.appendChild(element)
• Ayush: Thanks @Chris. Can confirm this still works as of 2023.

Answer 2

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.