如何使用 ReactJS 在我的桌面上保存文件？

Question

Right now I am creating a voice search feature. So the plan is I will record the audio using ReactJS, convert the Blob file into a.wav file. Then once the file is created I will save it locally on my desktop. Once the file is on the desktop, I will use the OS module in python to access the file on my desktop to interpret the audio file into text.

So everything is essentially done, the only problem that I am having is I can't figure out how to use ReactJS to save the file on my desktop.

Can someone please help me with this?

Answer 1

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

Answer 2

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>

Answer 3

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>