3

Our Requirement:

We have built a custom report in Lightning using lightning component as per the customer requirement.

Customer would like to have a downloadable as CSV for this custom report so that users can just download it and it will be downloaded with all the records with out any limits.

Currently we are sending out an email of custom report which is having heap size limit.

  • @citizen conn - there are list of records being displayed in lightning component. I just want to have downloadable or export of all the records as CSV. The records count hitting the heap size limit. Looking for help. – Vijay Ramesh Nov 30 '16 at 10:47
1

I found this resource to have a possible answer.

As you will noticed, I've tinkered a bit with the actual code from the site I linked, just for the sake of making this example reusable. I uploaded the final version of the component to this repo.

At the end of the day, you just want to have a quick button like this:

<aura:component description="CsvExporterButton">
    <!--Declare Attribute for store Contact Records List-->
    <aura:attribute name="records" type="Object[]"/>

    <lightning:buttonIcon iconName="utility:download" onclick="{! c.downloadCsv }" alternativeText="Export to CSV" />
</aura:component>

To which you can set the records in the following way:

<c:CsvExporterButton records="{!v.opportunities}" />

As for the logic, here are the controller and the helper:

Controller

({
    downloadCsv : function(component, event, helper){
        // get the Records [contact] list from 'ListOfContact' attribute
        var stockData = component.get("v.records");

        // call the helper function which "return" the CSV data as a String
        var csv = helper.convertArrayOfObjectsToCSV(component, stockData);
        if (csv == null){return;}

        // ####--code for create a temp. <a> html tag [link tag] for download the CSV file--####
        var hiddenElement = document.createElement('a');
        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
        hiddenElement.target = '_self'; //
        hiddenElement.download = 'ExportData.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
    },

})

Helper

({
    convertArrayOfObjectsToCSV : function(component, objectRecords){
        var csvStringResult, counter, keys, columnDivider, lineDivider;

        // check if "objectRecords" parameter is null, then return from function
        if (objectRecords == null || !objectRecords.length) {
            return null;
        }

        // store ,[comma] in columnDivider variable for separate CSV values and
        // for start next line use '\n' [new line] in lineDivider variable
        columnDivider = ',';
        lineDivider =  '\n';

        // in the keys valirable store fields API Names as a key
        // this labels use in CSV file header
        keys = Object.keys(objectRecords[0]); // FIXME: If the first record has empty fields, then they won't appear in header.
        console.log(keys);

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

        for(var i=0; i < objectRecords.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 += '"'+ objectRecords[i][skey]+'"';

                counter++;

            }

            csvStringResult += lineDivider;
        }

        return csvStringResult;
    },
})
| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.