Download einen string .txt-Datei im Reagieren

Hier ist ein funktionierendes Beispiel. Geben Sie den text in das Eingabefeld ein und klicken Sie auf Download txt verwenden, dies wird laden Sie eine txt mit dem Inhalt der von Ihnen eingegebene Eingabe.

Diese Lösung erstellt eine neue Blob-Objekt der text MIME-Typ und legt es auf den href einer temporären Anker (<a>) element, das wird dann ausgelöst, programmgesteuert.

Einem Blob-Objekt repräsentiert einen Datei-ähnliches Objekt unveränderlich, raw-Daten. Blobs stellen Daten, die nicht unbedingt in eine JavaScript-native format.

JS:

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"));

HTML:

<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>

Dieser Antwort wurde abgeleitet von thanhpk ist post.