Exporting Excel files in Angular on the client side

Question

Exporting Excel files in Angular on the client side

Using Angular v4, I am trying to figure out how to create an Excel spreadsheet based on an object within a component. The goal is to enable users to download the Excel file by clicking a button, all performed client-side. My data is in JSON format and I want to convert it into an Excel file that can be customized in terms of style. Is this feasible? If so, what is the approach?

Edit: Looking for a solution without using JavaScript libraries; seeking to accomplish this with TypeScript and Angular only.

excel angular typescript

Answer 1

Answer №1

yourinfo= jsonData

GenerateCSVData(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
              var str = '';
            var row = "";

            for (var index in objArray[0]) {
                //Converting each value to string and comma-separated
                row += index + ',';
            }
            row = row.slice(0, -1);
            //Appending 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)="save()">export data</button>

in component:

save(){    
 var csvData = this.GenerateCSVData(yourinfo);
                        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 = 'Results.csv';/* file name*/
                        a.click();
                        return 'done';
}

Hope it works for you

Answer 2

yourinfo= jsonData

GenerateCSVData(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
              var str = '';
            var row = "";

            for (var index in objArray[0]) {
                //Converting each value to string and comma-separated
                row += index + ',';
            }
            row = row.slice(0, -1);
            //Appending 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)="save()">export data</button>

in component:

save(){    
 var csvData = this.GenerateCSVData(yourinfo);
                        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 = 'Results.csv';/* file name*/
                        a.click();
                        return 'done';
}

Hope it works for you

Answer 3

Answer №2

After making a small modification by replacing "," with ";", Vishwanath's answer successfully worked for me. Here is how the implementation would look like in Typescript:

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;
  }

This solution may be useful to someone facing similar challenges.

Answer 4

After making a small modification by replacing "," with ";", Vishwanath's answer successfully worked for me. Here is how the implementation would look like in Typescript:

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;
  }

This solution may be useful to someone facing similar challenges.

Answer 5

Answer №3

Getting the task done without relying on JavaScript libraries in the background might be a challenge. To smoothly integrate it into your Angular project using TypeScript, you'll need the necessary typings.

If you're looking to create an Excel file, consider utilizing something like exceljs. Make sure to also add the required typings from here, although I can't vouch for its suitability as I haven't tried it myself.

For downloading purposes, check out FileSaver.js (which I've personally used).

npm install file-saver --save

Don't forget to include the typings:

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

To utilize FileSaver.js, add this import statement to your component:

import * as FileSaver from 'file-saver';

When you want to trigger the download, use the following syntax:

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

Make sure 'fileData' is in Blob format.

I hope this information proves helpful in some way.

Answer 6

Getting the task done without relying on JavaScript libraries in the background might be a challenge. To smoothly integrate it into your Angular project using TypeScript, you'll need the necessary typings.

If you're looking to create an Excel file, consider utilizing something like exceljs. Make sure to also add the required typings from here, although I can't vouch for its suitability as I haven't tried it myself.

For downloading purposes, check out FileSaver.js (which I've personally used).

npm install file-saver --save

Don't forget to include the typings:

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

To utilize FileSaver.js, add this import statement to your component:

import * as FileSaver from 'file-saver';

When you want to trigger the download, use the following syntax:

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

Make sure 'fileData' is in Blob format.

I hope this information proves helpful in some way.

Answer 7

Answer №4

It is not feasible.

XLS files are stored in a binary format.

The Apache POI project (referenced at https://en.wikipedia.org/wiki/Apache_POI) refers to this as HSSF (Horrible SpreadSheet Format).

My suggestion is to handle it on the server side for better efficiency.

Answer 8

It is not feasible.

XLS files are stored in a binary format.

The Apache POI project (referenced at https://en.wikipedia.org/wiki/Apache_POI) refers to this as HSSF (Horrible SpreadSheet Format).

My suggestion is to handle it on the server side for better efficiency.

Exporting Excel files in Angular on the client side

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Typescript is unable to locate the imported type Action

Accessing data from datatables in a typescript component in HTML format

I am currently working on integrating a Material Sorted feature

Display JSON Array information in a template using a component

Issue "Received 3 arguments instead of the expected 1-2" when implementing useQuery with React Query and TypeScript

The data type 'string | number | null | undefined' cannot be assigned to the type 'null'

mention colleague(parent) instruction request

Using Angular 6 to Share Data Among Components through Services

Extracting the base href in Angular 6

When creating an async function, the type of return value must be the universal Promise<T> type

The 'children' property is not found in the '{}' data type

Defining object properties in TypeScript types

What are the steps to launch a Firebase application without requiring user authentication?

Cease the animated loading icon once the template has finished loading in sync with the async pipe

What is the purpose of the try..catch statement in a recoil selectorFamily when handling promise errors?

The 'BrowserRouter' type is lacking the properties specified below... - TypeScript

Unable to include a header in an Angular 2 HTTP request

Ways to conceal button for inactive edit row on a table

Assistance with Python for managing Excel files in CSV format

Require a property to be mandatory depending on the value of another property within a generic interface