link.click(); does not work in internet explorer while working in chrome

Question

I have a program that tracks amount of incidents that happens on a server. I want to beable to export individual incident detail to a csv file and allow users to download it.

I have a button that on the frontpage that looks like this :

<button class="btn btn-main btn-actions-ok" ng-click="exportIncident()">Export Incident</button>

and on the back end code I have an array of array called totaDatarow [];

            $scope.exportIncident = function () {
                var totalDataRow = [];
                var csvContent = "data:text/csv;charset=utf-8,";
                var exportDataHeader = ["Event Type", "User ID", "Event Date", "Description", "DocNum", "Library", "Version", "Comments"]
                totalDataRow.push(exportDataHeader);
                var incident = $scope.incident;
                incident.details.forEach(function (detail) {
                    var exportDatarow = [];
                    //logic to add incident information to exportDatarow
                    totalDataRow.push(exportDatarow);
                })

                totalDataRow.forEach(function (infoArray) {

                    dataString = infoArray.join(",");
                    csvContent = csvContent + "\n" + dataString
                });

                var encodedUri = encodeURI(csvContent);
                var link = document.createElement("a");
                link.setAttribute("href", encodedUri);
                link.setAttribute("download", "Incident_"+ incident.id +".csv");

                link.click();
            }

I did not use window.open because by using that way, I can't find a way to customize the file name of the file that I generated. So I created a link inside the button and click on it to download. In chrome this code works perfectly fine. The csv file is created and downloaded. However in internet explorer this code simply does not work. When I click on the button nothing happens. I ran this through the debugger and found out that when internet explorer reach the link.click(). When it tries to process that line nothing happens.

I need help on this as I don't know whether it is my code issue or is it internet explorer compatibility issue? or something else thanks.

Answer 1

Internet Explorer doesn't support the download attribute, Edge does though

Check this posts for a workaround:

• Download attribute on A tag not working in IE
• IE 9+ Download Attribute workaround