Download Json Object As A File From Browser

When working with web applications, there may be times when you need to download a JSON object as a file directly from the browser. This process can be particularly useful for exporting data, sharing information, or simply saving content for future reference. In this guide, we'll walk you through the steps to effortlessly enable users to download a JSON object as a file from a web page.

Firstly, let's create a JSON object that we want users to download. You can either generate this object dynamically through your application or provide a static JSON object. For demonstration purposes, let's consider a simple example where we have a JSON object representing a list of users:

const users = [
  { id: 1, name: "Alice", email: "[email protected]" },
  { id: 2, name: "Bob", email: "[email protected]" },
  { id: 3, name: "Charlie", email: "[email protected]" }
];

const json = JSON.stringify(users);

Once you have your JSON object ready, the next step is to trigger the download when a user interacts with a specific element on the web page, like a button. Below is a straightforward example using JavaScript:

const downloadJsonAsFile = () => {
  const fileName = "users.json";
  const blob = new Blob([json], { type: "application/json" });

  const a = document.createElement("a");
  const url = URL.createObjectURL(blob);

  a.href = url;
  a.download = fileName;
  a.click();

  URL.revokeObjectURL(url);
};

In the code snippet above, we create a Blob object from our JSON string with the appropriate MIME type. We then create an anchor element (``) dynamically, set its `href` attribute to the URL created from the blob, assign the desired filename for the downloaded file, simulate a click on the anchor element, and finally revoke the Object URL once the download is initiated.