Vue Js Create CSV File

<!DOCTYPE html>
<html lang="en">

<body>
  <div id="app">
    <h3>Vue Js Create Csv file</h3>
    <button @click="generateCSV">Generate CSV</button>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          csvData: [
            ['Name', 'Age', 'Email'],
            ['John Doe', 25, 'john@example.com'],
            ['Jane Smith', 30, 'jane@example.com'],
            // Add more rows as needed
          ],
        };
      },
      methods: {
        generateCSV() {
          let csvContent = 'data:text/csv;charset=utf-8,';
          this.csvData.forEach((row) => {
            const csvRow = row.join(',');
            csvContent += csvRow + '\r\n';
          });

// Create a temporary anchor element to download the CSV file
          const encodedUri = encodeURI(csvContent);
          const link = document.createElement('a');
          link.setAttribute('href', encodedUri);
          link.setAttribute('download', 'data.csv');
          document.body.appendChild(link);

// Trigger the download
          link.click();

// Clean up
          document.body.removeChild(link);
        },
      },
    });
  </script>
  <style scoped>
    #app {
      text-align: center;
      margin-top: 50px;
    }

h3 {
      color: #333;
    }

button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

button:hover {
      background-color: #0056b3;
    }
  </style>
</body>

</html>