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?
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 () 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 (
);
}
}
ReactDOM.render( , document.getElementById("myApp"));
This answer was derived from thanhpk's post.