Untitled

<template>
  <div>
    <button @click="downloadCSV">Download as CSV</button>
    <button @click="downloadExcel">Download as Excel</button>
  </div>
</template>

<script>
import ExcelJS from 'exceljs';

export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    headers: {
      type: Array,
      required: true
    }
  },
  methods: {
    downloadCSV() {
      const csvContent = this.convertToCSV();
      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.setAttribute('href', url);
      link.setAttribute('download', 'data.csv');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    convertToCSV() {
      const header = this.headers.join(',');
      const rows = this.data.map(row => this.headers.map(field => JSON.stringify(row[field])).join(','));
      return [header, ...rows].join('\r\n');
    },
    async downloadExcel() {
      const workbook = new ExcelJS.Workbook();
      const worksheet = workbook.addWorksheet('Data');

      // Add headers
      worksheet.addRow(this.headers);

      // Add rows
      this.data.forEach(item => {
        worksheet.addRow(this.headers.map(header => item[header]));
      });

      // Create a buffer and download the file
      const buffer = await workbook.xlsx.writeBuffer();
      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.setAttribute('href', url);
      link.setAttribute('download', 'data.xlsx');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>

<style scoped>
button {
  margin: 5px;
}
</style>