Download function not working with IE but works fine with Chrome and Mozilla

Question

In my org we have a Vf page with a download link. Onclick of this link a csv file is downloaded. This is working absolutely fine with Chrome and Firefox, but the file doesn't download with IE. Any help is very much appreciated. Here is the code:

vf:

<apex:includeScript value="{!URLFOR($Resource.CC_PavilionDownloadPricing, 'underscore-min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.CC_PavilionDownloadPricing, 'react.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.CC_PavilionDownloadPricing, 'react-dom.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.CC_PavilionDownloadPricing, 'browser.min.js')}"/>

getPricingData() {
                CC_PavilionDownloadPricingCtrl.getorderItemsFromPriceBookEntry(
                    function(results, event) {
                        $('#myModal').modal('hide')
                        var key = _.keys(results)[0];
                        var today = moment().format("MM D YYYY");
                        var values = _.values(results)[0];

                        var data = [];
                        for(var idx = 0; idx < values.length; idx++) {
                            data.push({
                                'Part Number': values[idx].productCode !== undefined ? values[idx].productCode : '',
                                'Description': values[idx].productName !== undefined ? values[idx].productName : '',
                                'UM': values[idx].UM !== undefined ? values[idx].UM : 'EA',
                                'List Price': values[idx].listPrice !== undefined ? values[idx].listPrice : '',
                                'Disc. Price': values[idx].discountPrice !== undefined ? values[idx].discountPrice : '',
                                'Qty Disc': values[idx].qtyDiscount !== undefined ? values[idx].qtyDiscount : '',
                                'Qty Price': values[idx].qtyPrice !== undefined ? values[idx].qtyPrice : '',
                                'Type': values[idx].code !== undefined ? values[idx].code : 'GC'
                            }); 

                        }
                        JSONToCSVConvertor(data, key, today, true);

                    }, {
                        buffer: false
                    }
                );
            },
render: function() {
            return (
<div className="col-md-10">
                              <div className="panel panel-default">
                                <div className="panel-heading" data-toggle="modal" data-target="#myModal" onClick={this.getPricingData}>Download Pricing</div>
                              </div>
</div>
              );
            }
        });

        var ModalBox = React.createClass({
            render: function() {
                return (
                    <div id="myModal" className="modal fade" tabIndex="-1" role="dialog">
                        <div className="modal-dialog">
                            <div className="modal-content">
                                <div className="modal-header">
                                    <h4 className="modal-title">Please Wait...</h4>
                                </div>

                                <div className="modal-body">
                                    <center><img id="loading" src="/img/loading32.gif" /></center>
                                </div>
                                {/* modal-content */}
                            </div>
                        {/* modal-dialog */}
                        </div>
                    {/* modal */}
                    </div>
                );
            }
        })

Not sure sure if i had to add any javascript library for the download to work.

Answer 1

yes this is a vf page and there is a controller as well from which the method 'getorderItemsFromPriceBookEntry' is called. I am actually getting JS errors on IE as: SCRIPT5045: Assignment to read-only properties is not allowed in strict mode. and this is pointing to the line "Link.style = "visibility:hidden";" in the below code, i even tried changing it to visibility:display, but had no luck.

var JSONToCSVConvertor = function(JSONData, ReportTitle, today, ShowLabel) {
           //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
           var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

           var CSV = '';    
           //Set Report title in first row or line

           //CSV += ReportTitle + '\r\n\n';

           //This condition will generate the Label/Header
           if (ShowLabel) {
               var row = "";

               //This loop will extract the label from 1st index of on array
               for (var index in arrData[0]) {

                   //Now convert each value to string and comma-seprated
                   row += index + ',';
               }

               row = row.slice(0, -1);

               //append Label row with line break
               CSV += row + '\r\n';
           }

           //1st loop is to extract each row
           for (var i = 0; i < arrData.length; i++) {
               var row = "";

               //2nd loop will extract each column and convert it in string comma-seprated
               for (var index in arrData[i]) {
                   row += '"' + arrData[i][index] + '",';
               }

               row.slice(0, row.length - 1);

               //add a line break after each row
               CSV += row + '\r\n';
           }

           if (CSV == '') {        
               alert("Invalid data");
               return;
           }   

           //Generate a file name
           var fileName = ReportTitle.replace(/ /g,"_");   

           //Initialize file format you want csv or xls
           var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

           // Now the little tricky part.
           // you can use either>> window.open(uri);
           // but this will not work in some browsers
           // or you will not get the correct file extension    

           //this trick will generate a temp <a /> tag
           var link = document.createElement("a");    
           link.href = uri;

           //set the visibility hidden so it will not effect on your web-layout
           link.style = "visibility:hidden";
           link.download = fileName + ' ' + today + ".csv";

           //this part will append the anchor tag and remove it after automatic click
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
       }

       ReactDOM.render(<Content />, document.getElementById('content'));
    </script>
</apex:page>