🐆 How to export data to 🌏 CSV & JSON in React.js ☎️

Introduction

In the realm of web applications, offering users the ability to download data in various formats is often a crucial feature. In React applications, achieving this functionality is remarkably simple using the power of blobs. In this guide, we’ll explore how to download CSV and JSON files in React using blobs, empowering you to enhance user experience with seamless file downloads.

Why Blob?

A blob (Binary Large Object) is a data type representing raw binary data. In the context of web development, blobs are commonly used to handle file downloads. By utilising blobs, we can create files on the client-side and initiate downloads without the need for server interaction.

Downloading CSV File

Let’s start with downloading a CSV file. Below is a simple React component that enables users to download CSV data with just a click:

import React from 'react';

const DownloadCSV = ({ data, fileName }) => {
  const convertToCSV = (objArray) => {
    const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
    let str = '';
    for (let i = 0; i < array.length; i++) {
      let line = '';
      for (let index in array[i]) {
        if (line !== '') line += ',';
        line += array[i][index];
      }
      str += line + '\r\n';
    }
    return str;
  };
  const downloadCSV = () => {
    const csvData = new Blob([convertToCSV(data)], { type: 'text/csv' });
    const csvURL = URL.createObjectURL(csvData);
    const link = document.createElement('a');
    link.href = csvURL;
    link.download = `${fileName}.csv`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
  return (
    <button onClick={downloadCSV}>Download CSV</button>
  );
}
export default DownloadCSV;

Usage:

import React from 'react';
import DownloadCSV from './DownloadCSV';

const data = "Name,Age,Profession\nJohn Doe,30,Developer\nJane Smith,25,Designer";
const App = () => {
  return (
    <div>
      <h1>Download CSV Example</h1>
      <DownloadCSV data={data} fileName="employees" />
    </div>
  );
}
export default App;

Downloading JSON File

Now, let’s see how to download a JSON file:

import React from 'react';

const DownloadJSON = ({ data, fileName }) => {
  const downloadJSON = () => {
    const jsonData = new Blob([JSON.stringify(data)], { type: 'application/json' });
    const jsonURL = URL.createObjectURL(jsonData);
    const link = document.createElement('a');
    link.href = jsonURL;
    link.download = `${fileName}.json`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
  return (
    <button onClick={downloadJSON}>Download JSON</button>
  );
}
export default DownloadJSON;

Usage:

import React from 'react';
import DownloadJSON from './DownloadJSON';

const data = [
  { name: 'John Doe', age: 30, profession: 'Developer' },
  { name: 'Jane Smith', age: 25, profession: 'Designer' }
];
const App = () => {
  return (
    <div>
      <h1>Download JSON Example</h1>
      <DownloadJSON data={data} fileName="employees" />
    </div>
  );
}
export default App;

Conclusion

With these components, you can effortlessly enable file downloads in your React applications. Whether it’s exporting data for analysis or providing users with downloadable reports, leveraging blobs simplifies the process, enhancing the overall user experience. So go ahead, implement these solutions, and empower your users with seamless file downloads in your React applications.