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?

This is great, I used it and it's fabulous, thanks GMK and ModestMonk. The only change i made was to replace "navigator.msSaveBlob(blob, filename);" with "alert('Please run this app in chrome');" :D — Dan Rothman
– Dan Rothman, Commented Feb 27, 2020 at 20:44

GMK · Accepted Answer · 2018-05-16 17:06:23Z

11

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

answered May 16, 2018 at 17:06

GMK

2,9802 gold badges22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ModestMonk Over a year ago

That was it! Thanks!! I had taken a break, was so frustrated with it lol. Worked like a charm and thanks for the explanation/link.

Nancy Over a year ago

@ModestMonk Can u pls help me with this . stackoverflow.com/questions/51281848/…

Ziggler Over a year ago

I did everything same like this answer except this.. const blob = new Blob(data,{ type: 'text/csv', endings: 'native' }); ... here data is string[]

ResolveError · Accepted Answer · 2020-06-28 14:26:44Z

As your last statement says you want easiest way to download the data in csv . I will recommend you to use AngularCsv for export json to csv.

Installation

npm install --save angular-csv

Example

import { AngularCsv } from 'angular-csv/dist/Angular-csv';
 
var data = [
  {
    name: "Test 1",
    age: 13,
    average: 8.2,
    approved: true,
    description: "using 'Content here, content here' "
  },
  {
    name: 'Test 2',
    age: 11,
    average: 8.2,
    approved: true,
    description: "using 'Content here, content here' "
  },
  {
    name: 'Test 4',
    age: 10,
    average: 8.2,
    approved: true,
    description: "using 'Content here, content here' "
  },
];
 
new AngularCsv(data, 'My Report');

One thing you need to understand it have the different name but internal functionality of each package is same and you can use any package in any angular version but i will recommend you if you are using angular2 then use angular2-csv and if you are using angular7 then use angular7-csv.

Angular2

npm install --save angular2-csv

Angular 5

npm install --save angular5-csv

Angular 7

npm install --save angular7-csv

for more information go through https://www.npmjs.com/package/angular7-csv

Collectives™ on Stack Overflow

Exporting data to csv file in angular typescript

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related