How to Import Excel File in Angular 16

“ExcelJS” is a powerful library that allows you to read, manipulate, and write Excel files in various formats such as .xlsx, .xlsb, and more. It is not Angular-specific, but it can be integrated seamlessly with Angular projects to handle Excel-related tasks.

In this tutorial, you will learn how to import or read excel file and upload it in angular 16 projects using the exceljs library.

Angular 16 Read/Import Excel File Example

Steps to read/import excel file and upload in it angular 16 projects using the exceljs library:

• Step 1: Create a new Angular project
• Step 2: Install exceljs package
• Step 3: Create a file upload component
• Step 4: Implement the file upload functionality
• Step 5: Add CSS (Optional)
• Step 6: Update the app module
  

• Step 7: Add the component to the app component
• Step 8: Serve the application

Step 1: Create a new Angular project

First of all, open your terminal or command prompt and execute the following command to install and create a new Angular project via angular CLI:

ng new excel-import-tutorial

Step 2: Install exceljs package

Navigate to your project directory and execute the following command on command prompt or terminal to install the exceljs package:

cd excel-import-tutorial
npm install exceljs

Step 3: Create a file upload component

Next, you need to create a new component that will handle the Excel file upload and processing. So, execute the following command on command prompt or terminal:

ng generate component file-upload

Step 4: Implement the file upload functionality

Next, Open the generated file-upload.component.html file and add the following content:

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

Next, open the file-upload.component.ts file and implement the onFileChange method to handle the file upload and Excel file processing:

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) => {
      const worksheet = workbook.getWorksheet(1);
      worksheet.eachRow({ includeEmpty: false }, (row, rowNumber) => {
        // Process each row here
        console.log(row.values);
      });
    });
  }

}

Step 5: Add CSS (Optional)

You can add some basic CSS to style the file upload component in the file-upload.component.css file.

Step 6: Update the app module

Next, Open the app.module.ts file and import the FormsModule module to enable two-way data binding for the file input:

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 7: Add the component to the app component

Now, Open the app.component.html file and include the app-file-upload selector.

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

Step 8: Serve the application

Finally, Execute the following command on cmd to start Angular development server to see the Excel file import in action.

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’s it; In this tutorial, you learned how to import and process an Excel file in an Angular 16 application using the exceljs library.

Recommended Tutorials