Unable to download CSV File from javascript

Question

I have created a custom button. When user click on that button, it will redirect to a visualforce page. There I have written some code to download CSV file.

Code:

       const rows = [
                        ["name1", "city1", "some other info"],
                        ["name2", "city2", "more info"]
                    ];

                    let csvContent = "data:text/csv;charset=utf-8,";

                    rows.forEach(function(rowArray) {
                        let row = rowArray.join(",");
                        csvContent += row + "\r\n";
                    });
                    var encodedUri = encodeURI(csvContent);
                    var link = document.createElement("a");
                    link.setAttribute("href", encodedUri);
                    link.setAttribute("download", "mydata.csv");
                    link.setAttribute("target", "_self");
                    document.getElementById('success').appendChild(link);
                    link.click();

Above code will get invoked from a button click. When I use this page from Classic, it is working good. But, when I use in Lightning, a corrupted file is downloaded (Refer Attachment).

Answer 1

I have tested your code and it works in Lightning Experience (LEX) from VF page. The only thing, which doesn't work - when I click on button it initiates downloading csv file named download.csv in Chrome or randomly generated name in Firefox (not mydata.csv as you specified in JS).

Reason why it doesn't works in LEX? In the Salesforce app and Lightning Experience, Visualforce runs inside an iframe that’s inside the larger /lightning container. I guess because of that browsers ignore name specified in download attribute.

Also, I have tried your code directly in JS of lightning component/app. And, everything works as expected.

As a workaround, you can create for LEX separate button. And here you have three options:

1. You can create lightning app with the same JS code on button click. User should be redirected to your lightning app /c/YourAppName.app instead of VF page.
2. You can create lightning component which implements force:lightningQuickAction with the same JS code on button click. No redirects is required for this solution.
3. You can create lightning component which implements force:appHostable,flexipage:availableForAllPageTypes with the same JS code on button click. User should be redirected to your lightning tab /lightning/n/YourTabName instead of VF page.