创建可以打开本地 JSON 文件的 Electron/React 本地应用程序 - 编辑并导出

Question

我是 React 的新手，正在尝试创建一个可以打开本地 JSON 文件的应用程序，其中包含如下元素列表：

{
    "autor": "Name",
    "selftext": "Text",
    "title": "Title",
    "date": "2019-11-18 18:36:40",
    "content": "Content",
    "link": "www.web.com", 
    "origin": "web.com",
    "filename": "XY",
    "id": 1
},

导入的 JSON 应该是可扩展和可编辑的，然后将其与更改一起导出。在这里，我需要一些帮助，指导我从哪里开始以及我需要什么。

Answer 1

要在前端读取文件，您需要：

用 <input name='json' type='file' required>

<form onSubmit={handleSubmit}>

然后创建一个回调，handleSubmit，用于提取和解析所选文件：

function handleSubmit(e: Event) {
    e.preventDefault(); // Prevents the form from refreshing the page
    const formData = new FormData(e.target); // parses the data into a map
    const file = formdata.get("json");
    const filereader = new FileReader();
    filereader.readAsText(file);
    filereader.onload = () => handleResult(filereader.result);
}

function handleResult(result: string|ArrayBuffer|null) {
    if (result) {
        // Handle the file as you would like here. You will likely need to
        // parse the file here w/ JSON.parse. You could cache it
        // or pass it to the React.Context API so that it is available through  
        // the application.
    }
}

到write/export前端的文件，可以把JSON对象压入Blob，临时构造一个<a>元素开始下载：

function save() {
  const json = // retrieve JSON from wherever you stored it
  const file = new Blob([json], {endings: 'native'});
  const a = document.createElement('a');
  a.download='config.cfg'
  a.href = URL.createObjectURL(file);
  a.click();
}

当然是因为 Electron 的过程可能会略有不同，但这就是它在浏览器中与 React 一起工作的方式。

创建可以打开本地 JSON 文件的 Electron/React 本地应用程序 - 编辑并导出

Create an Electron/React Local Application which can open a local JSON FIle - Edit it and export it

json

reactjs

electron