Exporting data to csv file in angular typescript

Question

I am trying to export some data to a CSV file. I have it working in chrome but in IE11 I get redirected to another page with the blob data as the url.

I have filtered data I want to export listed under a class array called this.filteredReviews. I have a button that calls downloadButtonPush function. I am creating an anchor tag at the end of the body that is hidden and clicks itself after creation to download the csv data. Below is my code.

downloadButtonPush() {
    var csvData = this.ConvertToCSV(this.filteredReviews);
    var a = document.createElement("a");
    a.setAttribute('style', 'display:none;');
    document.body.appendChild(a);
    var blob = new Blob([csvData], { type: 'text/csv' });
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = 'ETPHoldReview.csv';
    a.click();
}
ConvertToCSV(objArray: any): string {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';
    var row = "";

    for (var index in objArray[0]) {
        //Now convert each value to string and comma-separated
        row += index + ',';
    }
    row = row.slice(0, -1);
    //append Label row with line break
    str += row + '\r\n';

    for (var i = 0; i < array.length; i++) {
        var line = '';
        for (var index in array[i]) {
            if (line != '') line += ','

            line += array[i][index];
        }
        str += line + '\r\n';
    }
    return str;
}

In chrome the data exports fine but in IE instead of opening the file download manager, I get redirected to a new page with the following as the URL address.

blob:6F807758-B267-4F51-8B6F-0CFDAFE68B78

Does anyone know why this code isn't working in IE or know if there is an easier way of exporting json to csv in angular?

Answer 1

You have to make a special case for IE (imagine that). It uses the msSaveBlob or msSaveOrOpenBlob function. Try rewriting your downloadButtonPush() function like this

downloadButtonPush() {
  var csvData = this.ConvertToCSV(this.filteredReviews);
  var blob = new Blob([csvData], { type: 'text/csv' });
  var url = window.URL.createObjectURL(blob);

  if(navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    var a = document.createElement("a");
    a.href = url;
    a.download = 'ETPHoldReview.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
  window.URL.revokeObjectURL(url);
}

I had the same problem a while ago and took most of this from this answer by PierreDuc