How to Export Data as Csv In Lightning Web Component(LWC)

 

Hello Guys, today in this post we are going to discuss about how to export data as CSV file in lightning web component(LWC). Friends in this post we will learn to export data as CSV file with Search functionality and checkbox functionality. Yes Actually this is very Unique Post. In this post we are fetching data on Record Name Base. We will Search Name in Search box and Fatch data accordingly and then we will Download only Selected Records. If user will not select any record then Download Csv Button will be disabled and user will not be able to to Download data as CSV file.

Let's go to Practical

Step 1 : exportCsvDataInLwcCtrl

public with sharing class exportCsvDataInLwcCtrl {
     
    @AuraEnabled(Cacheable=true)
    public static List<Account> getAccRecords(string searchName){
        string serachKey = '%' + searchName + '%';
        List<Account> lstAccount = [Select Id,Name,AccountNumber,AccountSource,Industry FROM Account
                                    Where Name Like : serachKey Limit 10];
        return lstAccount;
    }
}

Step 2 : exportCsvDataInLwc.Html

<template>
    <lightning-card title='Export Account Data As Csv File' icon-name="standard:account">
     
      <h1>
         <span class="slds-page-header__title slds-truncate slds-align_absolute-center" >sfdcfamily.blogspot.com</span>
       </h1>

       <div class='slds-m-around_small'>
          <!-- Lightning Input Start -->
          <lightning-input type='search' placeholder='Search...'  
             onchange={handleChange} class="slds-m-bottom_small">
          </lightning-input>
          <!-- Lightning Input End -->
          <!-- Download CsvFile Button  -->
          <lightning-button icon-name="utility:download" label="Download CSV" onclick={downloadCSVFile}
             variant="brand" disabled={disableBtn}></lightning-button>
          <!-- ############################ -->
       </div>
       <!-- Lightning Datatable Start -->
       <div class='slds-m-top-large'>
          <lightning-datatable key-field="Id" data={csvData} columns={csvColumns} show-row-number-column
             onrowselection={handleRowSelection}>
          </lightning-datatable>
         
          <template if:false={hasData}>
            <div class="slds-align_absolute-center" >No Data Found...</div>
         </template>
       </div>
       <!-- Lightning Datatable End -->
    </lightning-Card>
 </template>

Step 3 : exportCsvDataInLwc.Js

import { LightningElement,wire } from 'lwc';
import getAccRecords from '@salesforce/apex/exportCsvDataInLwcCtrl.getAccRecords';
let lstColumns = [
    {label : 'Name', fieldName : 'Name'},
    {label : 'AccountNumber', fieldName : 'AccountNumber'},
    {label : 'AccountSource', fieldName : 'AccountSource'},
    {label : 'Industry', fieldName : 'Industry'}
    ];
let fileName = 'exportsAccountRecords.csv';
export default class ExportCsvDataInLwc extends LightningElement {
    csvData;
    csvColumns;
    lstSelectedRecords;
    inptVal = '';
    disableBtn = true;
    hasData = true;



    @wire(getAccRecords, {
        searchName: '$inptVal',
    })
    wiredclass({
        data, error

    }) {
        if (data) {
            var fetchData = JSON.parse(JSON.stringify(data));
            this.csvColumns = lstColumns;
            if(fetchData.length > 0){
                this.hasData = true;
            }
            else {
                this.hasData = false;
            }
            this.csvData = fetchData;
           }
        if (error) {
            this.error = error;
            this.csvData = undefined;
        }
    }

    handleChange(event) {
        var searchVal = event.target.value;
        this.inptVal =  searchVal;
       }
    handleRowSelection() {
        var selectedRecords = this.template.querySelector("lightning-datatable").getSelectedRows();

        if (selectedRecords.length == 0) {
            this.disableBtn = true
         } else {
            this.disableBtn = false;
            this.lstSelectedRecords = selectedRecords;
        }
    }

    downloadCSVFile() {
        var keys = lstColumns.map(column => column.fieldName);
        var columnDivider = ",";
        var lineDivider = "\n";
        var csvStringResult = "";

        var excelHeaders = lstColumns
        .map(column => column.label)
        .join(columnDivider);
         
        csvStringResult += excelHeaders;
        csvStringResult += lineDivider;
       
        for (var i = 0; i < this.lstSelectedRecords.length; i++) {
                 var counter = 0;
                 for (var eachKey in keys) {
                     var skey = keys[eachKey];
                     if (counter > 0) {
                         csvStringResult += columnDivider;
                     }
                     var value =
                     this.lstSelectedRecords[i][skey] === undefined ? "" : this.lstSelectedRecords[i][skey];
                     csvStringResult += '"' + value + '"';
                     
                     counter++;
                     }
                 csvStringResult += lineDivider;
             }
            
        let downloadElement = document.createElement('a');
        downloadElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvStringResult);
        downloadElement.target = '_self';

        downloadElement.download = fileName;

        document.body.appendChild(downloadElement);
       downloadElement.click();
    }
}

Step 3 : exportCsvDataInLwcApp.app

<aura:application extends="force:slds">
    <c:exportCsvDataInLwc/>

</aura:application>

Output : 

If You have any doubt Or suggestion related this post then please comment us and share your opinion with us. We respect your opinion .

I hope you Liked it.