sipadu_mbip/resources/js/components/ExportCSV.js

import React from 'react'
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

export const ExportCSV = ({csvData, fileName, type}) => {

    const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
    const fileExtension = '.xlsx';

    const exportToCSV = (csvData, fileName, type) => {

        let finalData = [];
        if(type == 'Parkir'){
            csvData.map((item,i) => {
                finalData.push({
                    No : i,
                    Kpd : item.kpd,
                    Jenis: item.jenis,
                    Tarikh_Masa: item.tarikh_masa,
                    Kesalahan: 'Seksyen' + item.kesalahan.sketr +' '+ item.kesalahan.nama,
                    Kadar_Kompaun : item.jumlah_kemaskini_kompaun !== "" ? item.jumlah_kemaskini_kompaun : item.jumlah_asal_kompaun,
                    No_Plat: item.no_plate,
                    Penguatkuasa: item.enforcer.no_badan +', ' +item.enforcer.full_name,
                    Status: item.status,
                })
            })
        }else if(type == 'Pelbagai'){
            csvData.map((item,i) => {
                finalData.push({
                    No : i,
                    Kpd : item.kpd,
                    Jenis: item.jenis,
                    Tarikh_Masa: item.tarikh_masa,
                    Kesalahan: 'Seksyen' + item.kesalahan.sketr +' '+ item.kesalahan.nama,
                    Kadar_Kompaun : item.jumlah_kemaskini_kompaun !== "" ? item.jumlah_kemaskini_kompaun : item.jumlah_asal_kompaun,
                    Nric: item.nric,
                    No_Daftar_syarikat: item.no_daftar_syarikat,
                    Penguatkuasa: item.enforcer.no_badan +', ' +item.enforcer.full_name,
                    Status: item.status,
                })
            })
        }

        const ws = XLSX.utils.json_to_sheet(finalData);
        const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };
        const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
        const data = new Blob([excelBuffer], {type: fileType});
        FileSaver.saveAs(data, fileName + fileExtension);

    }

    return (
        <button onClick={(e) => exportToCSV(csvData,fileName,type)} className="btn btn-success btn-sm waves-effect waves-light f-right">
            Eksport ke CSV
        </button>
    )
}