How do I save a file on my desktop using ReactJS?

Refer the more detail in web.dev and about MDN blob

Following code will work. (Try loading in chrome dev console or similar)

const saveFile = async (blob) => { const a = document.createElement('a'); a.download = 'my-file.txt'; a.href = URL.createObjectURL(blob); a.addEventListener('click', (e) => { setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000); }); a.click(); }; const obj = {hello: 'world'}; const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'}); saveFile(blob); 

// With react

<div onClick={() => saveFile(blob)}> save file </div> 

You can use this https://www.npmjs.com/package/file-saver then save the file like this: saveAs(blob, 'filename').

once the file is created I will save it locally on my desktop

It is not possible to save a file from the browser to the Desktop, as this would be a huge security vulnerability.

However, you can save a file into the Downloads folder, if the user authorizes it.

This example saves a "Hello World!" text file to the Downloads folder.

Other data types can be saved, using the "data:" URL.

// save a text file named 'hello-world.txt' to Downloads folder document.querySelector('button').onclick = function(evt) { const data = `data:,Hello%2C%20World!`; const filename = 'hello-world.txt'; const aTag = document.createElement('a'); aTag.href = data; aTag.download = filename; aTag.click(); };

<button>Save Hello World!</button>