Generate CSV in LWC Salesforce

<template>

    <!------Header------->
    <div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
                            </span>
						</div>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
									<h1>
										<span>Generate CSV in LWC Salesforce</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div> <br/>
    <!------/Header------->
    <!----- LWC table and Download CSV button ------->
	<lightning-card title="Generate CSV in LWC Salesforce" icon-name="standard:contact">
        
		
        <template if:true={data}>
            <lightning-button icon-name="utility:download" label="Download CSV" title="Download CSV File"
						onclick={downloadCSVFile} variant="brand" slot="actions"></lightning-button>
			<div class="slds-m-around_medium">
				<!-- Datatable component -->
				<lightning-datatable columns={columns} data={data} hide-checkbox-column="true" key-field="id">
				</lightning-datatable>
			</div>
		</template>
	</lightning-card>
    <!----- /LWC table and Download CSV button ------->
</template>

import { LightningElement, track, wire} from 'lwc';
import fetchContacts from '@salesforce/apex/AccountDataController.fetchContacts';

// datatable columns
const cols = [
    {label: 'Name',fieldName: 'Name'}, 
    {label: 'Email',fieldName: 'Email'},
    {label: 'Phone',fieldName: 'Phone',type: 'phone'}, 
    {label: 'LeadSource',fieldName: 'LeadSource'}, 
    {label: 'Account Id',fieldName: 'AccountId'}, 
];

export default class GenerateCSVLWC extends LightningElement {
    @track error;
    @track data;
    @track columns = cols;

    @wire(fetchContacts, {})
    wireResult({error, data}){
        if(data){
            this.data = data;
        } else if(error){
            this.error = error;
            console.log(error);
        }
    }

    // this method validates the data and creates the csv file to download
    downloadCSVFile() {   
        let rowEnd = '\n';
        let csvString = '';
        // this set elminates the duplicates if have any duplicate keys
        let rowData = new Set();

        // getting keys from data
        this.data.forEach(function (record) {
            Object.keys(record).forEach(function (key) {
                rowData.add(key);
            });
        });

        // Array.from() method returns an Array object from any object with a length property or an iterable object.
        rowData = Array.from(rowData);
        
        // splitting using ','
        csvString += rowData.join(',');
        csvString += rowEnd;

        // main for loop to get the data based on key value
        for(let i=0; i < this.data.length; i++){
            let colValue = 0;

            // validating keys in data
            for(let key in rowData) {
                if(rowData.hasOwnProperty(key)) {
                    // Key value 
                    // Ex: Id, Name
                    let rowKey = rowData[key];
                    // add , after every value except the first.
                    if(colValue > 0){
                        csvString += ',';
                    }
                    // If the column is undefined, it as blank in the CSV file.
                    let value = this.data[i][rowKey] === undefined ? '' : this.data[i][rowKey];
                    csvString += '"'+ value +'"';
                    colValue++;
                }
            }
            csvString += rowEnd;
        }

        // Creating anchor element to download
        let downloadElement = document.createElement('a');

        // This  encodeURI encodes special characters, except: , / ? : @ & = + $ # (Use encodeURIComponent() to encode these characters).
        downloadElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvString);
        downloadElement.target = '_self';
        // CSV File Name
        downloadElement.download = 'Contact Data.csv';
        // below statement is required if you are using firefox browser
        document.body.appendChild(downloadElement);
        // click() Javascript function to download CSV file
        downloadElement.click(); 
    }

}

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>54.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>