Javascript React-将表单数据写入文件

我有一个react组件，它有一个获取用户输入的表单。。与发送表单数据的常规提交按钮不同，我希望能够将此数据写入文件，以便以后可以使用

这可以用vanilla JS来完成吗？或者有没有更有用的库

我的句柄提交方法如下所示：

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

所以通常这会将表单状态中的数据发送到我指定的URL

假设我想将这些数据放在表单状态中，而不是提交，将其写入文件

  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.
  };

这可能吗？这里有没有什么图书馆对你有帮助

---

我这里有一个更大的组件和表单演示

您可以在

handleSave

函数中调用以下函数：

函数下载（文件名、文本）{
var blob=新blob（[text]，{type:“text/plain”}）；
var url=window.url.createObjectURL（blob）；
var a=document.createElement（“a”）；
a、 href=url；
a、 下载=文件名；
a、 单击（）；
}
下载（“text.txt”，“此处文件内容…”）请尝试以下类似操作：

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

import React，{useState}来自“React”
导出默认值（）=>{
const[formdata，setFormData]=useState（{}）
const onChange=event=>setFormData（{…formdata[event.target.name]：event.target.value}）；
const downloadableData=encodeURIComponent（JSON.stringify（formdata，null，2））
返回
}
您无论如何都需要发送到服务器，因为浏览器无法写入文件，所以您最终还是发送了文件。您使用什么服务器技术？那就是你要做的！你说我需要把它发送到服务器是什么意思？如果我只想将其保存到磁盘，为什么需要进行服务器通信？您可能需要检查一些东西，例如根据您的用例，您可以使用
localStorage.setItem（'myData'，data）
@Pigetoe这对于本地缓存数据来说更合适，对吗？。我的想法是将文件导出/导入到不同的位置，能够将文件发送给另一个用户，在那里他们可以导入这些数据。因此，如果我只是需要这些数据在用户离开时保存在浏览器中，那么本地存储在这里将非常有用。我最终使用了这个解决方案，类似的事情你也可以这样做：
我正在取回原始xml，所以你可以
btoa
响应或变量，如果你将其设置为state。但是对于我提到的解决方案，您必须渲染第二个按钮，在我的例子中，按钮需要异步执行两件事情，以便您的解决方案适合我。