Hi guys, Today In this post we are seeing that how to Download/Export Data as CSV File format With Client Side JavaScript controller In Salesforce LightningComponent.

What is the CSV File ?

CSV stands for “comma-separated values”. CSV is a simple file format used to store tabular data, like a spreadsheet or database. Its data fields are most often separated, by a comma. Files in the CSV format can be imported to and exported from programs that store data in tables, such as Microsoft Excel or OpenOffice etc.

TestApp.app

Test App

1

2

3

4

5

6

7

8

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

<c:csvSample />

<!-- here c: is org. namespace prefix-->

</aura:application>

After the winter 17 release you can use the Lightning Design System style in Lightning Apps by extends=”fore:slds”. The Salesforce Lightning Design System provides a look & feel that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom applications a UI that is consistent with Salesforce.

Hi abhilash,
if you have got “undefined” it means you don’t have any data(null) value in record field.
if you don’t want get “undefined” in csv then add a undefined check in helper javaScript controller i.e
if(objectRecords[i][skey] != undefined){
csvStringResult += '"'+ objectRecords[i][skey]+'"';
}else{
csvStringResult += '"'+ '' +'"';
}
now if you have null value in record field it will be blank in csv instead Of undefined

I am not able to post comment in forum neither able to register.
I need help regarding export to excel. I refer your blog, but its working to export data in 1 sheet for workbook. I need to export data in two/three sheets of a single workbook. Like 1 sheet will contains open cases, 2nd sheet will contain closed cases etc. Request you to please help, if possible.

yes, you can do it by change on Line Number 36 in javaScript Helper
Use below line :
csvStringResult += [‘User First Name’,’User Last Name’,’My Department’,’Custom Phone’,’Object Id’ ];
insteadOf : csvStringResult += keys.join(columnDivider);

This is working fine normally. However, in my scenario, I am using an inline vf page on account detail page. In this inline VF page, there is lightning component which has “download as CSV” button. When I click on this button it says “We’d like to open the Salesforce page null… in a new tab. Because of your browser settings, we need your permission first.” in lightning experience. However, it works fine in classic. Any help would be much appreciated.

Thank you for the post. It is working fine for me. But I’m looking to fetch related fields as well. For example, I added custom field abc__r.xyz.__c in apex controller. But the value in csv is showing as undefined for all related fields.

Now in the helper, for the keys, im using the same api name such as abc__r.xyz.__c.

if you have got “undefined” it means you don’t have any data(null) value in record field.
if you don’t want get “undefined” in csv then add a undefined check in helper javaScript controller i.e

if(objectRecords[i][skey] != undefined){
csvStringResult += '"'+ objectRecords[i][skey]+'"';
}else{
csvStringResult += '"'+ '' +'"';
}
now if you have null value in record field it will be blank in csv instead Of undefined

Thanks for the blog. It helped me a lot. I have strucked in the mid i have writen a SOQL query with the relationship for eg:- abc__r.xyz__c, i cannot able to get the values while exporting into csv. I have used in the Key[‘abc__r.xyz__c’] but its not working. Please anyone can suggest a solution for this?

Daisy Scott

Daisy is a technology expert adviser and Marketing head of a financial organization, based in California, USA. Her interest lies basically in indulging various latest technologies, to improve marketing. Being an expert technological adviser she also contributes and shares his live experience with latest tools about Salesforce Lightning.