Skip to content
Snippets Groups Projects

Draft: added csv download functionality to pages

Closed Mohammad Torkashvand requested to merge add-csv-download-to-pages into develop
5 files
+ 53
18
Compare changes
  • Side-by-side
  • Inline
Files
5
import React from 'react';
interface DownloadCSVProps {
data: any[];
filename?: string;
}
function convertToCSV(jsonData: any[]): string {
if (!jsonData.length) return "";
const header = Object.keys(jsonData[0]);
const rows = jsonData.map(obj => {
return header.map(fieldName => {
const value = obj[fieldName];
// Handle null values and wrap strings with commas or double-quotes in double quotes
return value === null ? '' : typeof value === 'string' && (value.includes(',') || value.includes('"')) ?
`"${value.replace(/"/g, '""')}"` : value;
}).join(',');
});
// Combine header and rows with newline characters
return [header.join(','), ...rows].join('\r\n');
}
const DownloadCSVButton: React.FC<DownloadCSVProps> = ({ data, filename = 'data.csv' }) => {
const downloadCSV = () => {
const csv = convertToCSV(data);
const blob = new Blob([csv], { type: 'text/csv' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
return (
<>
<button onClick={downloadCSV}>Download CSV</button>
</>
);
}
export default DownloadCSVButton;
Loading