function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Brooks Johnson 6Brooks Johnson 6 

Export from Lightning to CSV -Help with Design

Hi Friends, 

I have a requirement for users to be able to download data to a CSV from a button click.  I had implemented a solution in the Aura controller that worked as long as the number of records was under a few thousand but fails with larger volume and the client wants to export up to around 7k records.  Note that the current solution works in Safari but fails in Chrome and Firefox. 

Below is the current solution. 

The controller

handleExport: function(component, event, helper){

        var contactList = component.get('v.completeResults');
        var csv = helper.convertListToCSV(component, contactList);

        var hiddenElement = document.createElement('a');
        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv); = '_self'; // = 'EmailSendList.csv';  // CSV file Name* you can change it.[only name not .csv]
        document.body.appendChild(hiddenElement); // Required for FireFox browser; // using click() js function to download csv file


This is the helper
convertListToCSV: function (component, list) {

        var csvStringResult, counter, keys, columnDivider, lineDivider;
        var csvHeader = '*** Changes to CSV Will Not be Saved Back To Event App *** ';

        // check if "list" parameter is null, then return from function
        if (list == null || !list.length) {
            return null;
        // store ,[comma] in columnDivider variabel for sparate CSV values and
        // for start next line use '\n' [new line] in lineDivider varaible
        columnDivider = ',';
        lineDivider =  '\n';

        // in the keys valirable store fields API Names as a key
        // this labels use in CSV file header
        keys = ['Delivery_Name', 'InformalSalutation', 'Last_Name', 'Email1', 'Inviter_Name', 'GalileoId', 'Relationship_Type',
                'Age', 'BAOffice', 'MarketingRestrictions', 'OptOut', 'PrimaryContact', 'BillingCity', 'BillingState',
                'Company', 'BA_Relationship', 'LastModifiedName', 'LastModifiedDate', 'LastModifiedDate', 'contactId'];

        csvStringResult = csvHeader + lineDivider;
        csvStringResult += keys.join(columnDivider);
        csvStringResult += lineDivider;

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

            for(var sTempkey in keys) {
                var skey = keys[sTempkey] ;

                // add , [comma] after every String value,. [except first]
                if(counter > 0){
                    csvStringResult += columnDivider;
                csvStringResult += '"'+ list[i][skey]+'"';


            } // inner for loop close
            csvStringResult += lineDivider;
        }// outer main for loop close

        // return the CSV format String
        return csvStringResult;

I think this needs to be redesigned.  Would I be better off calling a Visualforce page that renders in a csv or should I  generate the CVS string in Apex and pass that to the Aura controller instead of doing it all on the client-side? Or are there better solutions I am not even thinking of?


using apex class is not a good idea as the file size increses and to parse fiel you need for loop inside a for loop which will cause the CPU timeout in apex 


now if we keep it on Aura controller i think i will be much better solucation
If we can use cookies or somthing to save the half parese file kill th process and then reexecute the process parse other half of file marge with data saved in cokkie and generate the final file that might work
i think broweres are not allowing because of those for loop inside for loop iis causeing huge load and browere is killing the process