React:write to json file or export/download [no server] – Javascript

The Problem:

In React, how can I save data from a server as a JSON file in the project folder or directly download it without using a server or ejecting CRA?

The Solutions:

Solution 1: Download Json as a File

To download the JSON data as a file, you can use the following steps:

1. Create a blob object from the JSON data:

const data = JSON.stringify(myData);
const blob = new Blob([data], { type: 'application/json' });

2. Create an anchor element and set its href and download attributes:

const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'my-file.json';

3. Append the anchor element to the document body and then click it to trigger the download:

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

4. Don’t forget to revoke the object URL after the download is complete to prevent a memory leak:

URL.revokeObjectURL(link.href);

Solution 2: Download JSON with anchor element

This solution utilizes the HTML anchor element to download the JSON data as a file.

Here’s how it works:

1. Create a button element and assign it a href attribute with the following value:

href={`data:text/json;charset=utf-8,${encodeURIComponent(YOURJSON)}`}

• YOURJSON is the JSON data variable you want to download.
• data:text/json;charset=utf-8 specifies the MIME type as JSON and the character encoding as UTF-8.

2. Set the download attribute of the button to the desired filename, including the extension.

download="filename.json"

3. Add the button to your React component’s render method.

4. When the button is clicked, the browser will initiate a download of the JSON data with the specified filename.

This solution is straightforward and doesn’t require any additional dependencies or complex code.

Solution 3:

Here’s a straightforward solution that involves creating a downloadable JSON file using a button element:

1. First, you’ll need to stringify your JSON data into a valid JSON string. You can do this using the JSON.stringify() method.
2. Next, create a new Blob object using the Blob() constructor. The Blob object takes two arguments: the JSON string and an object specifying the type of the Blob (in this case, application/json).
3. Now, create a new anchor tag (<a>) element. Set the href attribute of the anchor tag to the URL of the Blob object. You can construct this URL using the URL.createObjectURL() method. It takes the Blob object as an argument and returns a URL that can be used to download the Blob.
4. Finally, set the download attribute of the anchor tag to the desired filename (e.g., “filename.json”).

When the user clicks on the anchor tag, the browser will prompt them to download the JSON file with the specified filename.