Export To Excel In Angular 12

Introduction

In this article, I will demonstrate how to export a set of data into an Excel sheet using Angular 12. Here we will use the Visual Studio Code IDE to demonstrate export functionality.

If you do not have Visual Studio Code on your system, you can download it from here Visual Studio Code IDE. Once you download Visual Studio Code IDE then, you can install it on your system.

Let's start step by step with how to create a new project in Visual Studio Code.

Prerequisite for Angular's new application

if you are getting the below error while writing the below command,

Download Node JS from here Node JS. Do the installation for Node JS. Once installation is done, you need to restart your system.

Again open Visual Studio code and Run npm install -g @angular/cli. It will install npm for you, and you can see the below screen with the npm installation.

Make a new application using Visual Studio code.

Run >  ng new export-excel to create a new angular application

Once a new create, you will get the below screen,

Now we are ready with a new project in visual studio code,

Install the NuGet package for Excel.

Run > npm i xlsx --save command to import xlsx npm module to the new project,

Create sample data for export.

Let's first create an interface to store data,

export interface employee {
    id: number
    firstName: string
    lastName: string
    city: string
    mobileNo: number
}

Let's create sample data,

data: employee[] = [{
    id: 10001,
    firstName: 'Rohit',
    lastName: 'patel',
    city: 'Rajkot',
    mobileNo: 9876654321
}, {
    id: 10002,
    firstName: 'Saurav',
    lastName: 'dhiman',
    city: 'Ahemdavad',
    mobileNo: 9876654329
}, {
    id: 10003,
    firstName: 'pinal',
    lastName: 'jaiswal',
    city: 'Rajkot',
    mobileNo: 9876654328
}, {
    id: 10004,
    firstName: 'Sanket',
    lastName: 'Bhalodiya',
    city: 'Manavadar',
    mobileNo: 9876654326
}, {
    id: 10005,
    firstName: 'sudhir',
    lastName: 'virpara',
    city: 'Amreli',
    mobileNo: 9876654325
}, {
    id: 10006,
    firstName: 'lalji',
    lastName: 'dhameliya',
    city: 'bhavnagar',
    mobileNo: 9876654321
}, {
    id: 10007,
    firstName: 'viren',
    lastName: 'ahir',
    city: 'jamnagar',
    mobileNo: 9876654331
}, {
    id: 10008,
    firstName: 'chirag',
    lastName: 'patel',
    city: 'ahemdavad',
    mobileNo: 9876653421
}, {
    id: 10009,
    firstName: 'mothit',
    lastName: 'patel',
    city: 'Rajkot',
    mobileNo: 9876654561
}, {
    id: 10010,
    firstName: 'amit',
    lastName: 'dave',
    city: 'porbandar',
    mobileNo: 9876654356
}, ]

Create a UI page to display a list of records for employees.

<!-- Toolbar -->
<div class="toolbar" role="banner">
  <img
    width="40"
    alt="Angular Logo"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
  />
  <span>Welcome</span>
    <div class="spacer"></div>
    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
        <rect width="400" height="400" fill="none"/>
        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
      </svg>
    </a>
    <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
      <svg id="youtube-logo" height="24" width="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff">
        <path d="M0 0h24v24H0V0z" fill="none"/>
        <path d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"/>
      </svg>
    </a>
</div>

<div class="content" role="main" style="width: 70%;">
    <button id="excel-table" class="btn btn-primary" (click)="exportexcel()">Export to Excel</button>
   
    <table  class="table table-striped">
      <thead>
        <tr>
          <th>Employee Id</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>City</th>
          <th>Mobile Number</th>
        </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of employeeList">
        <td>{{item.id}}</td>
        <td>{{item.firstName}}</td>
        <td>{{item.lastName}}</td>
        <td>{{item.city}}</td>
        <td>{{item.mobileNo}}</td>
      </tr>
      </tbody>
    </table>
  </div>

<router-outlet></router-outlet>

Run the npm serve command to build and compile the angular application.

Once the UI page is ready, we can view all records on the page as below.

Add an Export button to export data in Excel.

Create method exportexcel() to export to Excel and import * as XLSX from 'xlsx', which we have already installed in our app via npm command to use Excel workbook functionality.

import { Component } from '@angular/core';
import * as XLSX from 'xlsx';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'export-excel';
    fileName = 'ExportExce.xlsx';
    exportexcel(): void {
        /* pass here the table id */
        const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.employeeList);
        /* generate workbook and add the worksheet */
        const wb: XLSX.WorkBook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
        /* save to file */
        XLSX.writeFile(wb, this.fileName);
    }
}
export interface employee {
    id: number
    firstName: string
    lastName: string
    city: string
    mobileNo: number
}

Once you click on the export button, you will get all the data saved in an Excel file, and it will look as follows,

Summary

In this article, we learned how to display an employee list on an Angular web page and export a list of records to Excel. Here I have demonstrated export to Excel functionality using an Angular application step by step, which will help to create a new Angular application, create sample data, display it in a table, and provide the functionality to download the same list of employees to Excel. I hope this will help me learn about angular applications and export them to Excel.

To read more of my articles, please visit my profile at https://www.c-sharpcorner.com/members/jigs-patel6