Introduction
Providing users with the ability to download data in various formats is often essential for web applications. In React applications, this can be easily accomplished using blobs. This guide will show you how to download or export CSV & JSON files in React using blobs, enhancing the user experience with smooth file downloads.
Some websites allow users to download data in CSV or JSON formats, which is useful for further processing or sharing. By leveraging blobs, you can create files on the client side and initiate downloads without needing server interaction. This article explains how to implement functionality in React to export a table and download it as a JSON or CSV file, enabling users to easily obtain and utilize the data they need.
Why Use Blob?
A blob (Binary Large Object) represents raw binary data. In web development, blobs often handle file downloads. Using blobs allows us to create files on the client-side and initiate downloads without needing to interact with the server.
Downloading a CSV File
To begin with, let’s look at how to download a CSV file. Below is a simple React component that allows users to download CSV data with a single 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; 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
Similarly, downloading JSON files in React can be achieved using blobs. This approach provides users with the ability to export data in JSON format, ensuring a versatile and comprehensive data export solution for various use cases. Now, let’s see how to download a JSON file:
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; 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; Conclusion
Using these components, you can easily enable file downloads in your React applications. Whether exporting data for analysis or providing users with downloadable reports, blobs streamline the process, improving the overall user experience. Implement these solutions to empower your users with seamless file downloads in your React applications.
For more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency