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.


       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");

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).

enter image description here

1 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.
  • 1
    It is a List Button (URL Type). Only "Solution 2" is working. For Solution 1,3 I'm getting redirection problems. It is redirecting to unknown URL. So, I created a Lightning Quick Action and placed in parent object page layout. Thanks for your help....
    – Manoj
    Jul 28, 2019 at 19:43
  • could you help me take a look at this one when you have time? salesforce.stackexchange.com/questions/312168/…
    –  coinhndp
    Jul 9, 2020 at 8:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .