const convertToCSV = (data) => { const headers = Object.keys(data[0]).join(","); const rows = data.map(obj => Object.values(obj).join(",")); return [headers, ...rows].join("\n"); }; Use code with caution.
The most popular library for this task is . It provides a simple component that handles both the conversion and the download trigger. Install the package: npm install react-csv Use code with caution. react download array as csv
Use URL.createObjectURL and a temporary hidden anchor ( ) tag to prompt the browser download. javascript const convertToCSV = (data) => { const headers = Object
If you want to avoid extra dependencies, you can manually convert your array to a CSV string and use a to trigger the download. Step 1: Convert Array to CSV String Install the package: npm install react-csv Use code
Use the CSVLink component to wrap your download button or text.
const downloadCSV = (data) => { const csvString = convertToCSV(data); const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'export.csv'); document.body.appendChild(link); link.click(); document.body.removeChild(link); }; Use code with caution. Convert an array of objects to CSV string in JavaScript
Exporting data from a web application is a common requirement, and in React, downloading an array as a CSV file can be achieved either through third-party libraries or native JavaScript methods.