September 28, 2018 - Simply Salesforce

Use below code to download data as a CSV file from the lightning component.

Component

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <!-- 1.attribute to store return value and show on component. -->
    <aura:attribute name="gridData" type="Object"/>
    <!-- 2.handler to call method "doInit" of jsCOntroller on loading of component. -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
    <div class="slds-m-around--xx-large">     
        <button class="slds-button slds-button--brand" onclick="{!c.downloadCSV}">Download As CSV</button> <br/><br/>
        <table class="slds-table slds-table--bordered" id="pbId">
            <!-- 3.Header of table. -->
            <thead>
                <tr class="slds-text-heading--label">            	
                    <aura:iteration items="{!v.gridData.headers}" var="col">                             
                        <th class="{!col.cssClass}"> {!col.title} </th>
                    </aura:iteration>             
                </tr>        	
            </thead>
            <!-- 4.Body of table. -->
            <tbody>
                <!-- Limitation - we cannot use indexvar of iterator control to refer header json information else, instead of defining css class for each column, we could have used it from header only -->
                <aura:iteration items="{!v.gridData.rows}" var="row">
                    <tr class="slds-hint-parent">
                        <aura:iteration items="{!row.vals}" var="col" indexVar="idx">                       
                            <td id="{!'theTd__' + idx}" class="{!col.cssClass}">{!col.val}</td>
                        </aura:iteration>
                    </tr>
                </aura:iteration>           
            </tbody>   
        </table>
    </div>
</aura:component>

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">

<aura:attribute name="gridData" type="Object"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<button class="slds-button slds-button--brand" onclick="{!c.downloadCSV}">Download As CSV</button> <br/><br/>

<thead>

<aura:iteration items="{!v.gridData.headers}" var="col">

<th class="{!col.cssClass}"> {!col.title} </th>

</aura:iteration>

</tr>

</thead>

<tbody>

<aura:iteration items="{!v.gridData.rows}" var="row">

<aura:iteration items="{!row.vals}" var="col" indexVar="idx">

</aura:iteration>

</tr>

</aura:iteration>

</tbody>

</table>

</div>

</aura:component>

Controller.js

({
    doInit : function(component, event, helper) {
        // 1. Calling helper method "doInit".
        helper.doInit(component, event, helper);
    },
    // 2. Method to download CSV file.
    downloadCSV : function(component, event, helper,fileTitle) {
        // 3. Getting table data to download it in CSV.
        var gridData = component.get("v.gridData");
        // 4. Spliting headers form table.
        var gridDataHeaders = gridData["headers"];
        // 5. Spliting row form table.
        var gridDataRows = gridData["rows"];
        // 6. CSV download.
        var csv = '';
        for(var i = 0; i < gridDataHeaders.length; i++){         
            csv += (i === (gridDataHeaders.length - 1)) ? gridDataHeaders[i]["title"] : gridDataHeaders[i]["title"] + ','; 
        }
        csv += "\n";
        var data = [];
        for(var i = 0; i < gridDataRows.length; i++){
            var gridRowIns = gridDataRows[i];
            var gridRowInsVals = gridRowIns["vals"];
            var tempRow = [];
            for(var j = 0; j < gridRowInsVals.length; j++){                                     
                var tempValue = gridRowInsVals[j]["val"];
                if(tempValue.includes(',')){
                    tempValue = "\"" + tempValue + "\"";
                }
                tempValue = tempValue.replace(/(\r\n|\n|\r)/gm,"");                 
                tempRow.push(tempValue);
            }
            data.push(tempRow); 
        }
        data.forEach(function(row){
            csv += row.join(',');
            csv += "\n";
        });
        // 6. To download table in CSV format.
        var hiddenElement = document.createElement('a');
        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
        hiddenElement.target = '_blank';
        hiddenElement.download = 'fileTitle'+'.csv'; 
        hiddenElement.click();
    }
    
})

({

doInit : function(component, event, helper) {

// 1. Calling helper method "doInit".

helper.doInit(component, event, helper);

// 2. Method to download CSV file.

downloadCSV : function(component, event, helper,fileTitle) {

// 3. Getting table data to download it in CSV.

var gridData = component.get("v.gridData");

// 4. Spliting headers form table.

var gridDataHeaders = gridData["headers"];

// 5. Spliting row form table.

var gridDataRows = gridData["rows"];

// 6. CSV download.

var csv = '';

for(var i = 0; i < gridDataHeaders.length; i++){

csv += (i === (gridDataHeaders.length - 1)) ? gridDataHeaders[i]["title"] : gridDataHeaders[i]["title"] + ',';

}

csv += "\n";

var data = [];

for(var i = 0; i < gridDataRows.length; i++){

var gridRowIns = gridDataRows[i];

var gridRowInsVals = gridRowIns["vals"];

var tempRow = [];

for(var j = 0; j < gridRowInsVals.length; j++){

var tempValue = gridRowInsVals[j]["val"];

if(tempValue.includes(',')){

tempValue = "\"" + tempValue + "\"";

}

tempValue = tempValue.replace(/(\r\n|\n|\r)/gm,"");

tempRow.push(tempValue);

}

data.push(tempRow);

}

data.forEach(function(row){

csv += row.join(',');

csv += "\n";

});

// 6. To download table in CSV format.

var hiddenElement = document.createElement('a');

hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);

hiddenElement.target = '_blank';

hiddenElement.download = 'fileTitle'+'.csv';

hiddenElement.click();

}

})

helper.js

({
    
    doInit : function(component, event, helper) {
        // 1. Calling method "getSampleJSON()" and parsing it into JSON object.
        var jsonData = JSON.parse(helper.getSampleJSON());
        // 2. Setting parsed data in attribute "gridData".
        component.set("v.gridData",jsonData);
    },
    getSampleJSON : function(){
        // 3. Variable declaration and assigning value to show in component.
        var jsonStr = '{"rows":[{"vals":[{"val":"Salesforce","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@Salesforce.com","cssClass":""},{"val":"8602229632","cssClass":"responsiveHide"}]},{"vals":[{"val":"Microsoft","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@microsoft.com","cssClass":""},{"val":"8602283222","cssClass":"responsiveHide"}]},{"vals":[{"val":"SAP","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@SAP.com","cssClass":""},{"val":"8600942222","cssClass":"responsiveHide"}]},{"vals":[{"val":"Google","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@Google.com","cssClass":""},{"val":"8602479222","cssClass":"responsiveHide"}]}],"headers":[{"title":"ClientName","isSortable":false,"dataType":"","cssClass":""},{"title":"Address","isSortable":false,"dataType":"","cssClass":""},{"title":"Email","isSortable":false,"dataType":"","cssClass":""},{"title":"Mobile","isSortable":false,"dataType":"","cssClass":"responsiveHide"}]}';
        return jsonStr;
    }           
})

({

doInit : function(component, event, helper) {

// 1. Calling method "getSampleJSON()" and parsing it into JSON object.

var jsonData = JSON.parse(helper.getSampleJSON());

// 2. Setting parsed data in attribute "gridData".

component.set("v.gridData",jsonData);

getSampleJSON : function(){

// 3. Variable declaration and assigning value to show in component.

var jsonStr = '{"rows":[{"vals":[{"val":"Salesforce","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@Salesforce.com","cssClass":""},{"val":"8602229632","cssClass":"responsiveHide"}]},{"vals":[{"val":"Microsoft","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@microsoft.com","cssClass":""},{"val":"8602283222","cssClass":"responsiveHide"}]},{"vals":[{"val":"SAP","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@SAP.com","cssClass":""},{"val":"8600942222","cssClass":"responsiveHide"}]},{"vals":[{"val":"Google","cssClass":""},{"val":"SFO","cssClass":""},{"val":"info@Google.com","cssClass":""},{"val":"8602479222","cssClass":"responsiveHide"}]}],"headers":[{"title":"ClientName","isSortable":false,"dataType":"","cssClass":""},{"title":"Address","isSortable":false,"dataType":"","cssClass":""},{"title":"Email","isSortable":false,"dataType":"","cssClass":""},{"title":"Mobile","isSortable":false,"dataType":"","cssClass":"responsiveHide"}]}';

return jsonStr;

}

})

Sample App for testing

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

<aura:application extends="force:slds">

<c:DownloadAsCsv/>

</aura:application>

M	T	W	T	F	S	S
« May				Oct »
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Simply Salesforce

Day: September 28, 2018

CSV File Download from Lightning Component

Component

Controller.js

helper.js

Sample App for testing

Like this:

Day: September 28, 2018

Component

Controller.js

helper.js

Sample App for testing

Share this:

Like this: