Export data to Excel Using React

 

COMMAND 

=========================================================================

npm install xlsx file-saver --save

ExportCsv file

=========================================================================

import React from 'react'

import * as FileSaver from 'file-saver';

import * as XLSX from 'xlsx';

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

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

    const fileExtension = '.xlsx';

    const exportToCSV = (csvData, fileName) => {

        const ws = XLSX.utils.json_to_sheet(csvData);

        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)}>Export</button>

    )

}

App.JS

=========================================================================

import React from "react";

import {ExportCSV} from './ExportCSV';

export default function App() {

  const fileName = 'TechnicalAdda'

  const viewers = [

    {id:1,name:'sakumar'},

    {id:2,name:'kumar'}

  ]

  return (

    <div>

     <ExportCSV csvData={viewers} fileName={fileName} />

  </div>

  );

}