csv fle download in lightning component

Download Data as CSV File With JavaScript In Salesforce Lightning Component

Lightning Component

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 Lightning Component.

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.

Prerequisites : basic understanding of Lightning Component, JavaScript and Apex Programming.

In This Sample, we will create a simple Lightning Component which is showing the Contact [salesforce standard object] Records. and also creating a HTML Button to download table data as CSV format.

Output:

CSV File download from lightning component

CSV File:

CSV File download from lightning component

apex Controller [csvDownloadCtrl.apxc]

  • Above apex class is just return the List of Contact Records.
Lightning Component [csvSample.cmp]

  • See Code Comments
JavaScript Controller [csvSampleController.js]

  • See Code Comments
JavaScript Helper [csvSampleHelper.js]

  • See Code Comments
  • If You want add another column to CSV file from object, add Field API name to Line number 33 on JS helper controller. such as -:

TestApp.app

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.

Some Useful Resources : 

Use of Aura:iteration

Use aura:valueInit [aura:handler name=”init”]..

https://www.lightningdesignsystem.com/components/data-tables/

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference. 🙂

if you have any suggestions or issue with it, you can post in comment box  🙂

(Visited 8,102 times, 48 visits today)

50 comments

  • Hi,

    Thanks for the blog.

    Can you please help me how to export data in multiple sheets inside one excel. I have three data tab to export inside one excel sheet.

    Also when I am trying to export the lookup column like CreatedBy.LastName, its not giging any result.

     

     

  • Hi ,

    I tried to download the data into csv using above code,but i am geeting “undefined” in the csv sheet.

    • 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

      thanks

  • Hi ,

    Thanks for your reply . Is there any way to ignore the columns so that it should not come in csv file?

  • Hi Piyush,

    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.

  • Hi..

    i am getting error when i click on “Download as Csv” button though data is populated.

    Here is the error..

    This page has an error. You might just need to refresh it. Action failed: Ashi:csvSample$controller$downloadCsv [Access is denied. ] Failing descriptor: {Ashi:csvSample$controller$downloadCsv}

    Can u please help me on this?

    Regards,
    Sudheer.

    • 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);

      Thanks

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

    Thanks

  • Hi,

    Is there any way we can make Download file Name dynamic.

    this part hiddenElement.download = ‘ExportData.csv’;

    with some present date stamp etc

    Thanks

  • Hi,

    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.

    keys = [‘abc__r.xyz.__c‘,‘FirstName’,‘LastName’,‘Department’,‘MobilePhone’,‘Id’ ]

    Do I need to follow different approach to retrieve related fields.

    Thank you.

     

     

  • Hi,

    Thank you for the post. It is working fine for me. But I also want to fetch related fields in the soql. For example I need custom field abc__r.xyz__c. Added it in soql.

    Now in the helper, I added api name in the same format abc__r.xyz__c.
    I added it in keys variable as below.
    keys = [‘abc__r.xyz__c‘,’FirstName’,’LastName’,’Department’,’MobilePhone’,’Id’ ];

    But the values in the csv are showing as ‘undefined’. Do I need to follow a different approach to get related fields.

    Thank you.

  • Hi, I’m able to download the CSV file but there’s a special character appearing when it was downloaded. Can u please help me with this

  • sfdcmonkey: If we want to use/modify/copy your code,  is that OK? No licenses or notices that we need to be aware of?

  • Hi,

    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?

    • first query abc__r.xyz__c in your apex class SOQL query.

      and in your lightning component add new row in aura:iteration tag :

      {!con.abc__r.xyz__c}

      and in your javaScript helper function on line number 33 add your related field,such as:
      keys = ['FirstName','LastName','Department','Level__c','MobilePhone','Id','abc__r' ];
      Update line number 50 with below statement :
      if(typeof objectRecords[i][skey] === 'object'){
      csvStringResult += '"'+ objectRecords[i][skey].xyz__c+'"';
      }else{
      csvStringResult += '"'+ objectRecords[i][skey]+'"';
      }

      This will be solve your issue
      Thanks

  • Hi Piyush,

    I need to download only selected records with the check box  next to each records by clicking on Download Button. pls help with me download code or logic if possible.

  • Thanks for the code. Is that possible to download the csv if we have paginated the records? What do we need to do in that case? Please clarify. Thanks

  • Hi. This is really useful. I have Custom Label as Excel Columns and it doesnt display translated labels correctly in in the CSV file.

  • Hi ,

    Great blog.  can you please also help me on how to upload the excel using lighting and parse it to perform DML operations on excel records. Through VF I know but in lighting ,facing the issue to pass the file from lighting to apex.

     

    Thanks in advance 🙂

     

  • HI Piyush.. loved the code thanks so much !!

    do we have a similar code for downloading data as XLS file. M not able to find it anywhere

  • HI Piyush .. loved the code thank so much!

    Do we have a similar code for downloading data as xls file as well? m not able to find it anywhere

  • Hi ,

    Thanks for sharing this. It was very helpful.

    Can you please also tell me that how can I get the size of the CSV file and show the indicator of the downloading file that how much size is downloaded.

  • Hi,

    I have a visualforce tab. I am using lightning component to download csv file. this lightning component has been used in visualforce page. VF tab the download button is working fine in salesforce classic and  tried the same thing in lightning I am getting an error “Page doesn’t exist”. Please help me if you have faced the same issue.

     

    Thanks in advance

Leave a Reply