Angular export Excel client side

Question

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

Answer 1

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

Answer 2

You may not like this answer based on your requirements; however, without a JS library you are re-inventing the wheel. I've personally found Excel XML formats to be mind boggling, with the library below, (callable from within Angular), you can benefit from the work already done on that front.

There are two parts to your design, the download and the opening/editing of the content, neither are Angular related as Angular is just the container to do the work.

1. Search for how to download files within Angular
2. Once the download has happened, and the file is now "local" open it up using something like this

Answer 3

I think you will not get that done without js libraries in the background. What you need are the typings for utilizing it in your Angular project with typescript.

For creating an excel file you could use something like exceljs . To use it in your project also install the typings you can find here . I am not sure if this library fits... haven't used it before.

For downloading you should use FileSaver.js (I have already used it).

npm install file-saver --save

... and the typings:

npm install @types/file-saver --save-dev

For using FileSaver.js put the following import to your component:

import * as FileSaver from 'file-saver';

To trigger the download use that:

FileSaver.saveAs(fileData, "filename.xlsx")

'fileData' has to be a Blob.

Hope this helps a little.

Answer 4

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.

Answer 5

it not is possible.

XLS is a binary format.

The project Apache POI( https://en.wikipedia.org/wiki/Apache_POI ) name class as HSSF (Horrible SpreadSheet Format).

my recommendation, make it in server side.