You need to sign in to do that
Don't have an account?
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); hiddenElement.target = '_self'; // hiddenElement.download = 'EmailSendList.csv'; // CSV file Name* you can change it.[only name not .csv] document.body.appendChild(hiddenElement); // Required for FireFox browser hiddenElement.click(); // 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]+'"'; counter++; } // 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