3

Lightning Controller

getData : function(component, file, fileContents) {        
    var action = component.get("c.data");

    action.setCallback(this, function(response) {
        var state = response.getState();
        var csvContent = response.getReturnValue();

        if (component.isValid() && state === "SUCCESS") {
            var encodedUri = encodeURI(csvContent);

            //Security review states that the below code violates DOM Modification rule
            var link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "data.csv");
            document.body.appendChild(link);
            link.click();

        }
    });
    $A.enqueueAction(action);         
}, 

other try was using window.open(encodedUri) is there any possibility to download .csv in Lightning Component without manipulating DOM?

3

Modern browsers support Data URIs, meaning that you can do this:


app

<aura:application >
    <ui:button label="Download" press="{!c.download}" />
</aura:application>

controller

({
    download: function(component, event, helper) {
        var a = document.createElement("a");
        a.href = "data:text/csv,base64;ImhlbGxvIiwid29ybGQiCg==";
        a.download = "text.csv";
        a.click();
    }
})

The file will download automatically or provide a prompt for the user, depending on the browser. It is not necessary to add the link to the DOM for this to work.

In practice, you'll want to base64 encode your return value in Apex, so you can append it directly:

getData : function(component, file, fileContents) {        
    var action = component.get("c.data");

    action.setCallback(this, function(response) {
        var state = response.getState();
        var csvContent = response.getReturnValue();

        if (component.isValid() && state === "SUCCESS") {
            var link = document.createElement("a");
            link.href = "data:text/csv;base64,"+csvContent;
            link.download = "data.csv";
            link.click();

        }
    });
    $A.enqueueAction(action);         
}, 
  • security review rejected us stating that var encodedUri = encodeURI(csvContent);var link = document.createElement("a"); is Lightning: Controller DOM Modification Violation – Saravanan Baskar Apr 10 '17 at 11:45
  • 1
    @SaravananBaskar Hmm, not sure then. I'll have to research it some more. I feel like that's an illegitimate concern. – sfdcfox Apr 10 '17 at 20:29
  • @SaravananBaskar I believe sfdcfox is right, since we are not appending the created anchor tag it shouldn't be flagged as Controller DOM Modification Violation. Can you create a case and reach out to the Partner community with case id, you'll surely get some help there. – Praveen Apr 11 '17 at 7:54
  • @SaravananBaskar When our component was security reviewed, there was one place DOM manipulation was done in the helper and Security Review team flagged it. But what's interesting was, we didn't have a controller at all in the component and all DOM manipulating code were invoked from the Renderer. – Praveen Apr 11 '17 at 7:59
  • thanks sfdcfox and Praveen for your clarification and help!! Our app passed the test!! – Saravanan Baskar Apr 18 '17 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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