Download a string as .txt file in React

后端 未结 1 1756
一生所求
一生所求 2020-12-28 16:54

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?

相关标签:
1条回答
  • 2020-12-28 17:30

    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.

    0 讨论(0)
提交回复
热议问题