Angular 17 Import Excel File Data to JSON

To import and read Excel file data into Angular; The easiest way to convert excel file data to json data is to use exceljs module, it will read binary string data and convert into JSON object.

How to Import and Read Excel File Data to JSON

Steps to import and read excel file data and convert it into JSON in angular 17 projects:

Step 1: Create a new Angular project

To set up Angular project in system, simply use ng new projectName command on cmd to install and create a new Angular project via angular CLI:

ng new myApp --no-standalone
cd myApp

Step 2: Install exceljs package

Install exceljs module to read Excel file and convert it to json in angular project, for this you can use npm install exceljs command:

npm install exceljs

Step 3: Create a file upload component

Creating a file upload component to handle Excel file upload and processing; For this just use ng generate component file-upload command on cmd:

ng generate component file-upload

Step 4: Create File Upload Form in Template

Simply create file upload form in html template, Simply Open file-upload.component.html file and and create it as follows:

<h1>Angular 17 Import Excel File Upload</h1>
<input type="file" (change)="onFileChange($event)">

Now, create file upload functionality in component file, Simply open file-upload.component.ts file and implement the onFileChange method to handle the file upload and Excel file processing; create it as follows:

import { Component } from '@angular/core';
import * as ExcelJS from 'exceljs';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {


  onFileChange(event: any): void {
    const file = event.target.files[0];
    const fileReader = new FileReader();

    fileReader.onload = (e: any) => {
      const arrayBuffer = e.target.result;
      this.parseExcel(arrayBuffer);
    };

    fileReader.readAsArrayBuffer(file);
  }

parseExcel(arrayBuffer: any): void {
  const workbook = new ExcelJS.Workbook();
  workbook.xlsx.load(arrayBuffer).then((workbook) => {
    let jsonData: any[] = [];
    workbook.eachSheet((worksheet, sheetId) => {
      worksheet.eachRow({ includeEmpty: false }, (row, rowNumber) => {
        let rowData: any = {};
        row.eachCell({ includeEmpty: true }, (cell, colNumber) => {
          rowData[`column${colNumber}`] = cell.value;
        });
        jsonData.push(rowData);
      });
    });

    console.log(JSON.stringify(jsonData, null, 2));
  });
}

}

Step 5: Import Modules in Typescript

To import installed modules in app.module.ts; like following:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { FileUploadComponent } from './file-upload/file-upload.component';

@NgModule({
  declarations: [
    AppComponent,
    FileUploadComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 6: Add the component to the app component

Open the app.component.html file and add the app-file-upload selector into it; like following:

<app-file-upload></app-file-upload>

Step 7: Serve the application

Run ng serve command on cmd to start Angular development server:

ng serve

Visit http://localhost:4200/ in your browser, and you should see the “Excel File Upload” heading and a file input field. When you select an Excel file using the file input, the onFileChange method will be triggered, and the Excel file will be parsed row by row, with each row’s data being logged to the console.

Conclusion

That’it all; you have learned how to import and read file data from input and convert it into JSON object in angular projects.

Recommended Tutorials