web-dev-qa-db-fra.com

Téléchargez une chaîne en tant que fichier .txt dans React

J'ai une chaîne qui doit être téléchargée dans un fichier txt lorsque vous cliquez sur un bouton. Comment cela peut-il être mis en œuvre en utilisant React?

javascriptfilereactjsmime-types
14
Akash Sateesh

Voici un exemple de travail. Saisissez le texte dans le champ de saisie et cliquez sur Download txt, ceci téléchargera un txt avec le contenu que vous avez entré dans l'entrée.

Cette solution crée un nouvel objet Blob du type MIME text et l'attache au href d'une ancre temporaire (<a>) élément qui est ensuite déclenché par programmation.

Un objet Blob représente un objet de type fichier de données brutes immuables. Les blobs représentent des données qui ne sont pas nécessairement dans un format natif JavaScript.

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>

Cette réponse est dérivée de celle de thanhpkpost .

32
Chris