React Js Create CSV File | Export Data to CSV File

<!DOCTYPE html>
<html>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;

function App() {
      const csvData = [
        ['Name', 'Age', 'Email'],
        ['John Doe', 25, 'john@example.com'],
        ['Jane Smith', 30, 'jane@example.com'],
        ['Michael Johnson', 28, 'michael@example.com'],
        ['Emily Brown', 22, 'emily@example.com'],
        ['William Lee', 35, 'william@example.com'],
        ['Sophia Kim', 29, 'sophia@example.com'],
        ['James Wilson', 31, 'james@example.com'],
        ['Olivia Davis', 27, 'olivia@example.com'],
        ['Alexander Taylor', 26, 'alexander@example.com'],
        ['Ava Anderson', 24, 'ava@example.com'],
        // Add more rows as needed
      ];

const generateCSV = () => {
        let csvContent = 'data:text/csv;charset=utf-8,';
        csvData.forEach((row) => {
          const csvRow = row.join(',');
          csvContent += csvRow + '\r\n';
        });

const encodedUri = encodeURI(csvContent);
        const link = document.createElement('a');
        link.setAttribute('href', encodedUri);
        link.setAttribute('download', 'data.csv');
        document.body.appendChild(link);

link.click();

document.body.removeChild(link);
      };

return (
        <div className='container'>
          <h3 style={{ color: '#333' }}>React Js Export Data to CSV file</h3>
          <button
            onClick={generateCSV}
            style={{
              padding: '10px 20px',
              backgroundColor: '#007bff',
              color: '#fff',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              fontSize: '16px',
            }}
          >
            Export Data to CSV file
          </button>
        </div>
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
​
<head>
  <meta charset="UTF-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
​
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;
​
    function App() {
      const csvData = [
        ['Name', 'Age', 'Email'],
        ['John Doe', 25, 'john@example.com'],
        ['Jane Smith', 30, 'jane@example.com'],
        ['Michael Johnson', 28, 'michael@example.com'],
        ['Emily Brown', 22, 'emily@example.com'],
        ['William Lee', 35, 'william@example.com'],
        ['Sophia Kim', 29, 'sophia@example.com'],
        ['James Wilson', 31, 'james@example.com'],
        ['Olivia Davis', 27, 'olivia@example.com'],
        ['Alexander Taylor', 26, 'alexander@example.com'],
        ['Ava Anderson', 24, 'ava@example.com'],
        // Add more rows as needed
      ];
​
      const generateCSV = () => {
        let csvContent = 'data:text/csv;charset=utf-8,';
        csvData.forEach((row) => {
          const csvRow = row.join(',');
          csvContent += csvRow + '\r\n';
        });
​
        const encodedUri = encodeURI(csvContent);
        const link = document.createElement('a');
        link.setAttribute('href', encodedUri);
        link.setAttribute('download', 'data.csv');
        document.body.appendChild(link);
​
        link.click();
​
        document.body.removeChild(link);
      };
​
      return (
        <div className='container'>
          <h3 style={{ color: '#333' }}>React Js Export Data to CSV file</h3>
          <button
            onClick={generateCSV}
            style={{
              padding: '10px 20px',
              backgroundColor: '#007bff',
              color: '#fff',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              fontSize: '16px',
            }}
          >
            Export Data to CSV file
          </button>
        </div>
      );
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  </style>
</body>
​
</html>