Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular export Excel client side

I'm using Angular v4, i guess how can I build an Excel spreadsheet starting from an object in a component. I need to download the Excel file on the click of a button and I have to do this client side. I have a json file composed of arrays and I need to transfer this on an excel file, possibly customizable in style. Is it possible? If yes, how?

Edit: No js libraries please, need to do this with Typescript and Angular

like image 421
Gianluca Paris Avatar asked May 22 '17 10:05

Gianluca Paris


People also ask

Which of the following exporting options does Excel allow?

You can export a table, query, form, or report. You can also export selected records in a multiple-record view, such as a datasheet.


2 Answers

yourdata= jsonData

ConvertToCSV(objArray) {
            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 your html:

<button (click)="download()">export to excel</button>

in component:

download(){    
 var csvData = this.ConvertToCSV(yourdata);
                        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 = 'User_Results.csv';/* your file name*/
                        a.click();
                        return 'success';
}

Hope you it will help you

like image 110
paruvelly Vishwanath Avatar answered Sep 19 '22 18:09

paruvelly Vishwanath


Vishwanath answer was working for me when i replaced "," with ";". In Typescript the implementation could look like this:

ConvertToCSV(objArray: any) {
    const array = typeof objArray !== 'object' ? JSON.parse(objArray) : objArray;
    let str = '';
    let row = '';

    for (const index of Object.keys(objArray[0])) {
      row += `${index};`;
    }
    row = row.slice(0, -1);
    str += `${row}\r\n`;

    for (let i = 0; i < array.length; i++) {
      let line = '';
      for (const index of Object.keys(array[i])) {
        if (line !== '') {
          line += ';';
        }
        line += array[i][index];
      }
      str += `${line}\r\n`;
    }
    return str;
  }

I hope this helps someone.

like image 21
user3588429 Avatar answered Sep 21 '22 18:09

user3588429