React：写入json文件或导出/下载[no server]

Question

我对JS / TS中的文件I / O感到困惑。我看到的大多数示例都适用于DOM并具有基于浏览器的解决方案。

另外，我不明白如何使fs工作，它似乎需要一个webpack配置，我使用CRA，不想弹出。

在React组件中，我想从服务器获取一些数据，然后将它们保存为项目文件夹中的JSON文件（相同的路径，根目录，公共文件夹，无论如何）或直接下载（无需按钮）。

//data type just in case
inteface IAllData{ name:string; allData:IData[];}

所以在获取一些数据之后想要将它们保存到name.json

public componentDidMount(){
   this.fetchData().then(()=>this.saveData())
}

public async fetchData(){/* sets data in state*/}

public saveData(){
    const {myData}=this.state;
    const fileName=myData.name;
    const json=JSON.stringify(myData);
    const blob=new Blob([json],{type:'application/json'})
    /* How to write/download this blob as a file? */
}

在这里尝试window.navigator.msSaveOrOpenBlob(blob, 'export.json');没有工作

注意：我知道它有安全隐患，不适合生产。保存项目文件夹中的文件是首选，但下载完全没问题。

Answer 1

我有一个包含数据的blob，我在stackoverflow上找到了一个解决方案并进行了一些操作，并成功下载为xlsx文件。我在下面添加我的代码，它也可能对你有帮助。

const blob =  await res.blob(); // blob just as yours
const href = await URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = href;
link.download = "file.xlsx";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

编辑：我已经为你的情况写了一个函数，你可以使用下面的函数，但要注意“fileName”（在我的情况下不是“this.state”对象）和存储在“this.state”中的“myData”对象“对象。

const downloadFile = async () => {
  const {myData} = this.state; // I am assuming that "this.state.myData"
                               // is an object and I wrote it to file as
                               // json
  const fileName = "file";
  const json = JSON.stringify(myData);
  const blob = new Blob([json],{type:'application/json'});
  const href = await URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = href;
  link.download = fileName + ".json";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}