Vue Js Create CSV File

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

</style>
</head>

<body>
  <div id="app">
    <h3>Vue js Create CSV file by User Input</h3>

<button class="add-button" @click="addData">Add Data</button>
    <button class="generate-button" @click="generateCSV">Generate CSV</button>
  </div>

this.csvData.push({ ...this.row });
          this.clearInputs();
          this.showToast('Data added successfully.', 'success');
        },

generateCSV() {
          let csvContent = "data:text/csv;charset=utf-8,";
          const headers = ["name", "email", "role"];
          csvContent += headers.join(",") + "\n";
          this.csvData.forEach(row => {
            csvContent += Object.values(row).join(",") + "\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);

this.showToast('CSV file generated.', 'success');
        },
        clearInputs() {
          this.row.name = "";
          this.row.email = "";
          this.row.role = "";
        },
        showToast(message, type) {
          const toast = document.createElement('div');
          toast.className = `toast ${type}`;
          toast.textContent = message;

document.body.appendChild(toast);

setTimeout(() => {
            toast.remove();
          }, 3000);
        }
      }
    });
  </script>
  <style scoped>
    #app {
      max-width: 400px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }

.toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px;
      background-color: #222;
      color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      font-family: Arial, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      z-index: 9999;
    }

.toast.success {
      background-color: #387d3b;
    }

.toast.error {
      background-color: #c0392b;
    }

h3 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

input {
      display: block;
      width: 100%;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      transition: border-color 0.3s ease;
      outline: none;
    }

input:focus {
      border-color: #4caf50;
    }

button {
      display: inline-block;
      width: 100%;
      padding: 12px;
      font-size: 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      text-align: center;
      color: #fff;
    }

.add-button {
      background-color: #4caf50;
    }

.add-button:hover {
      background-color: #45a049;
    }

.generate-button {
      background-color: #337ab7;
    }

.generate-button:hover {
      background-color: #286090;
    }
  </style>

</body>

</html>