JSFiddle - React, Tailwind, and code Playground

by Vivek Kumar Bansal

HTML

<button id="download">Download CSV</button>

JavaScript

const data = [
    [ 1, 'Timothy' , 'Hamilton' , 'Male'  , '146.205.212.14' ],
    [ 2, 'Jose'    , 'Parker'   , 'Male'  , '93.159.55.174'  ],
    [ 3, 'Terry'   , 'Vasquez'  , 'Male'  , '119.83.126.89'  ],
    [ 4, 'Ruby'    , 'Rose'     , 'Female', '124.60.220.96'  ],
    [ 5, 'Lawrence', 'Henderson', 'Male'  , '208.165.238.89' ],
    [ 6, 'Jeffrey' , 'Campbell' , 'Male'  , '235.159.156.1'  ],
    [ 7, 'Jack'    , 'Torres'   , 'Male'  , '220.147.205.219'],
    [ 8, 'Rachel'  , 'Stanley'  , 'Female', '186.17.24.36'   ],
    [ 9, 'Gregory' , 'Pierce'   , 'Male'  , '241.176.82.141' ],
    [ 10, 'Ronald' , 'Hanson'   , 'Male'  , '70.93.233.186'  ],
];

let csvData = '';

// create CSV data
data.forEach((row) => {
    csvData += '\n';
    csvData += row.reduce((prev, col) => `${prev},${col}`, '').slice(1); 
});

// add headers
csvData = 'id,first_name,last_name,gender,ip_address' + csvData;

downloadCSV = () => {
    const hiddenElement = document.createElement('a');

    hiddenElement.href = `data:text/csv;charset=utf-8,${encodeURI(csvData)}`;
    hiddenElement.target = '_blank';
    hiddenElement.download = 'download.csv';
    document.body.appendChild(hiddenElement);
    hiddenElement.click();
    hiddenElement.remove();
};

document.getElementById('download').addEventListener('click', downloadCSV);