I got really confused with file I/O in JS/TS. most examples I see works with DOM and has browser-based solutions.
Also, I did not understand how to make fs
work, it seems to need a webpack config, where I use CRA and do not want to eject.
in a React component I want to fetch some data from a server then save them as a JSON file in the project folder (the same path, root, public folder, no matter) or directly download (no button needed).
//data type just in case
inteface IAllData{ name:string; allData:IData[];}
so after fetching some data want to save them to 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? */
}
here trying window.navigator.msSaveOrOpenBlob(blob, 'export.json');
did not work
note: I know it has security risks, it is not for production. save the file in the project folder is preferred but a download is totally ok.
Export to JSON Let's start by creating a file with users data that will be used for downloading a file and rendering a table. Next, we need to update the App component to utilise the users data and display it in a table. Besides that, we will add a button to trigger the download. Below you can see the code for the App.
Step 1: Open the terminal and create react app. Step 2: Change the directory to that folder by executing the command. Project Structure: It will look like the following. Step 3: Creating a JSON Object File here and Save it as data.
I had a blob containing data and I had found a solution on stackoverflow and manipulated a bit, and succeded to download as a xlsx file. I am adding my code below, it might help you, too.
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);
EDIT: I have written a function for your case, you can use below function, but be careful about "fileName" (not in "this.state" object in my case) and "myData" object that is stored in "this.state" object.
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With