Monday, September 9, 2019

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.


   <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"  
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.


 import {  
 } 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() {  
   getContacts() {  
       .then(result => {  
         this.contactList = result;  
       .catch(error => {  
         this.error = 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 += '""';  
       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.


public with sharing class ExportToExcelDemoController { 
   public class ContactWrapper{  
     public string contactName;  
     public string contactEmail;  
     public ContactWrapper(Contact contactObj){  
       this.contactName = contactObj.Name;  
       this.contactEmail = contactObj.Email;  
   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. :)

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 lightn...