J'ai un composant de réaction qui a un formulaire qui reçoit les entrées de l'utilisateur. Au lieu du bouton d'envoi régulier qui envoie les données du formulaire, je veux pouvoir écrire ces données dans un fichier afin qu'elles puissent être utilisées ultérieurement.

Cela peut-il être fait en utilisant vanilla JS ou existe-t-il une bibliothèque qui pourrait être plus utile ?

Ma méthode de soumission de poignée ressemble à ceci:

  handleSubmit = e => {
    e.preventDefault();
    const data = JSON.stringify({
      parameters: {
        startTime: this.state.date,
        selectors: this.state.selectors,
        offset: this.state.offset,
        "length.seconds": this.state.lengthSeconds,
        "runtime.seconds": !this.state.checked
          ? this.state.runtimeSeconds
          : undefined
      }
    });
    console.log(data);
  };

Donc, normalement, cela enverrait les données à l'intérieur de l'état du formulaire à l'URL que je spécifie.

Disons que je veux prendre ces données à l'intérieur de l'état du formulaire, au lieu de les soumettre, écrivez-les dans un fichier.

  handleSave = e => {
    e.preventDefault();
    const data = JSON.stringify({
      parameters: {
        startTime: this.state.date,
        selectors: this.state.selectors,
        offset: this.state.offset,
        "length.seconds": this.state.lengthSeconds,
        "runtime.seconds": !this.state.checked
          ? this.state.runtimeSeconds
          : undefined
      }
    });
    // write data to csv file here.
  };

Est-ce possible? Y a-t-il une certaine bibliothèque qui serait utile ici?

J'ai un codesandbox ici avec une plus grande démonstration de mon composant et de ma forme

1
DJ2 12 mars 2019 à 20:55

2 réponses

Meilleure réponse

Vous pouvez appeler la fonction suivante dans votre fonction handleSave :

function download(filename, text){
  var blob = new Blob([text], {type: "text/plain"});
  var url = window.URL.createObjectURL(blob);
  var a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
}

download("text.txt", "file contents here...");

Liste des types MIME ici : https://www.freeformatter. com/mime-types-list.html#mime-types-list

1
spencer.sm 12 mars 2019 à 18:15

Essayez comme ci-dessous :

   import React, { useState } from 'react'

   export default () => {
     const [formdata, setFormData] = useState({})
     const onChange = event => setFormData({ ...formdata, [event.target.name]: event.target.value });
     const downloadableData = encodeURIComponent(JSON.stringify(formdata, null, 2))
     return <React.Fragment>
       <form>
           <input type="text" name="name" onChange={onChange} value={formdata.name || ''} />
           <input type="text" name="address" onChange={onChange} value={formdata.address || ''} />
           <input type="text" name="emailId" onChange={onChange} value={formdata.emailId || ''} />
       </form>
       <a href={`data:applicatiom/json,${downloadableData}`} download="formdata.json">Download Form Data</a>
   </React.Fragment>
 }
0
anunaki 12 mars 2019 à 18:26