Andy Tran

Export Data From LWC to CSV/XLS

by | 26 Jun, 2023 | Salesforce | 2 comments

Export Data from LWC to CSV/XLS

Hello, folks! Today, we’re diving into an exciting topic: implementing the ‘Export to Excel’ feature in Lightning Web Components.
We often encounter the need to export data in Excel format, and in this post, we’ll explore how to achieve this seamlessly using Lightning web components.

Imagine this scenario:
You have a lightning data table showcasing some valuable data.
Now, wouldn’t it be fantastic if you could provide your users with a simple way to download that data in xls/csv format? Well, you can! With just a few lines of code, we’ll make it happen.

Now, let’s dive into the actual implementation! Below, you’ll find the code that brings the ‘Export to Excel’ functionality to life. So, buckle up and get ready to empower your users with this amazing feature!

Exporting to XLS/CSV Format:

The ContactController class retrieves the contact details from the Contact object.

public with sharing class ContactController {
@AuraEnabled (cacheable=true)
public static List<Contact> getContacts(){
return [SELECT Id, Name, Email, Phone, LeadSource, AccountId
FROM Contact LIMIT 20];


    <!----- LWC table and Download buttons ------->
    <lightningcard title="Generate CSV/XLS from Salesforce" 
<template if:true={data}>
        <lightning-button icon-
name="utility:download" label="Download CSV" onclick={handleDownload
CSV} variant="brand" slot="actions"></lightning-button> 
        <lightning-button icon-
name="utility:download" label="Download XLS" onclick={handleDownloaX
LS} variant="brand" slot="actions"></lightning-button>
            <div class="slds-m-around_medium">
                <!-- Datatable component -->
datatable columns={columns} data={data} hide-checkbox-
column="true" key-field="id">

Generate CSV/XLS from Salesforce

    • The above code showcases a datatable which displays data from the data property
      and uses the columns property to define the columns.
    • It also includes two buttons for downloading CSV and XLS files respectively.
    • When clicked, the buttons trigger the respective download functions.


import { LightningElement, track, wire } from 'lwc';

import getContacts from '@salesforce/apex/ContactController.getConta
export default class GenerateExcel extends LightningElement {
    @track error;
    @track data;
    @track columns = [
        { label: 'Name', fieldName: 'Name' },
        { label: 'Email', fieldName: 'Email' },
        { label: 'Phone', fieldName: 'Phone', type: 'phone' },
        { label: 'Lead Source', fieldName: 'LeadSource' },
        { label: 'Account ID', fieldName: 'AccountId' }
    @wire(getContacts, {})
    wireResult({ error, data }) {
        if (data) {
   = data;
        } else if (error) {
            this.error = error;
    handleDownloadCSV() {
    handleDownloadXLS() {
    downloadFile(format) {
        if ( && > 0) {
            let content = '';
            // Adding column headers
            this.columns.forEach((col) => {
                content += col.label + ',';
            content += '\n';
            // Adding data rows
   => {

                this.columns.forEach((col) => {
                    const value = record[col.fieldName] || '';
                    content += '"' + value.replace(/"/g, '""') + '",
                content += '\n';
            const link = document.createElement('a');
//Determine the MIME type of the file based on the requested format
('xls' or 'csv').
            const mimeType = format === 'xls' ? 'application/
excel' : 'text/csv';
//Construct a data URL using the content string and the MIME type.
            const dataUrl = 'data:' + mimeType + ';charset=utf-
8,' + encodeURIComponent(content);
            link.href = dataUrl;
//Set the download attribute of the <a> element to specify the
filename of the downloaded file, appending the format extension.
            link.setAttribute('download', 'ContactDetails.' + format
   = 'hidden';
      • The @wire decorator connects the component to the getContacts Apex method, fetching the contact data.
      • The downloadFile() method generates a file by iterating over the data and columns, creating a content string.
      • It then creates a download link with the appropriate MIME type and data URL.
      • Finally, it triggers a click event on the link to initiate the file download for the user.

Voila! The CSV/XLS file is now ready to be downloaded by the user, containing all the contact data.

Generate csv xls

Downloaded CSV File
Download CSV/XLS file

So, there you have it! Generating and downloading a CSV/XLS file in Lightning Web Components is pretty straightforward, thanks to the power of LWC and JavaScript. I hope you found this blog post both informative and enjoyable.

Stay tuned for more exciting blog posts where we’ll continue to explore new learnings and have fun
along the way. Happy coding!


Also Read : How to Integrate Salesforce with WordPress

Also, if you are in need of a Salesforce certified consultant, look no further. Our team of experienced consultants are experts in all aspects of Salesforce, from implementation to customization and training. We understand the unique needs of your business and can provide tailored solutions that will drive your sales and streamline your processes. With our expertise, you can trust that you are in capable hands.

Share this article...


  1. Mayur Shekhavat

    Thank you for the information!! is it possible to only download selected records?

  2. Hetvi

    Your blog always works for me !! Thanks and Keep writing


Submit a Comment

Your email address will not be published. Required fields are marked *

The reCAPTCHA verification period has expired. Please reload the page.