Salesforce: Export to Excel with Lightning Web Component

Hello Guys,

I hope you are doing well. In this post, we are going to see an implementation of "Export to Excel" in lightning web components.

Exporting the data in Excel is a very common requirement for Developers. We will see how this can be achieved with Lightning web components.

Following HTML code just do a couple of things.

•  Show a link to "Download Excel"
•  Show the data to be exported, in the lightning data table.
•  Click on the Download Excel button would call the js method called exportToCSV.

exportToExcelDemo.html

 <template>  
   <a target="_self" class="slds-button" download="ExportToCSV.csv" href={hrefdata} onclick={exportToCSV}  
     style="margin-left: 80%;">Download Excel</a>  
   <lightning-datatable data={contactList} columns={contactColumns} key-field="id"  
     hide-checkbox-column="true">  
   </lightning-datatable>  
 </template>  

This js file contains the main logic to export the data.

• Link click will call the exportToCSV method. This function creates a CSV data required for our excel file. 
• CSV created based on the controller method getContacts() which passes the contact wrapper.

exportToExcelDemo.js

 import {  
   LightningElement,  
   track  
 } from "lwc";  
 import getContacts from "@salesforce/apex/ExportToExcelDemoController.getContacts";  
 const columns = [{  
     label: "Name",  
     fieldName: "contactName",  
     type: "text"  
   },  
   {  
     label: "Email",  
     fieldName: "contactEmail",  
     type: "text"  
   }  
 ];  
 export default class ExportToExcelDemo extends LightningElement {  
   @track hrefdata;  
   @track contactList;  
   @track contactColumns = columns;  
   connectedCallback() {  
     this.getContacts();  
   }  
   getContacts() {  
     getContacts()  
       .then(result => {  
         this.contactList = result;  
       })  
       .catch(error => {  
         this.error = error;  
         console.log(this.error);  
       });  
   }  
   exportToCSV() {  
     let columnHeader = ["Name", "Email"];  // This array holds the Column headers to be displayd
     let jsonKeys = ["contactName", "contactEmail"]; // This array holds the keys in the json data  
     var jsonRecordsData = this.contactList;  
     let csvIterativeData;  
     let csvSeperator  
     let newLineCharacter;  
     csvSeperator = ",";  
     newLineCharacter = "\n";  
     csvIterativeData = "";  
     csvIterativeData += columnHeader.join(csvSeperator);  
     csvIterativeData += newLineCharacter;  
     for (let i = 0; i < jsonRecordsData.length; i++) {  
       let counter = 0;  
       for (let iteratorObj in jsonKeys) {  
         let dataKey = jsonKeys[iteratorObj];  
         if (counter > 0) {  csvIterativeData += csvSeperator;  }  
         if (  jsonRecordsData[i][dataKey] !== null &&  
           jsonRecordsData[i][dataKey] !== undefined  
         ) {  csvIterativeData += '"' + jsonRecordsData[i][dataKey] + '"';  
         } else {  csvIterativeData += '""';  
         }  
         counter++;  
       }  
       csvIterativeData += newLineCharacter;  
     }  
     console.log("csvIterativeData", csvIterativeData);  
     this.hrefdata = "data:text/csv;charset=utf-8," + encodeURI(csvIterativeData);  
   }  
 }  

Finally, this simple controller method that returns you the contact wrapper containing the data.

ExportToExcelDemoController.cls 

public with sharing class ExportToExcelDemoController { 
   public class ContactWrapper{  
     @AuraEnabled  
     public string contactName;  
     @AuraEnabled  
     public string contactEmail;  
     public ContactWrapper(Contact contactObj){  
       this.contactName = contactObj.Name;  
       this.contactEmail = contactObj.Email;  
     }  
   }  
   @AuraEnabled  
   public static List<ContactWrapper> getContacts(){  
     List<ContactWrapper> contactWrapperList = new List<ContactWrapper>();  
     for(Contact cwObj : [select id, Name, Email from Contact limit 5]){  
       contactWrapperList.add(new ContactWrapper(cwObj));  
     }  
     return contactWrapperList;  
   }  
 }  

It's pretty easy, isn't it?

I hope you enjoyed the learning, please write me back the suggestions, comments or any issues. Let's meet in our next post with more learnings and fun. :)