Categories: Angular

Export Excel Using Angular

In this article, we will learn about how we can use the excel file and also see to import the excel file using Angular. As angular is client side language but we can still import and export the data from excel using Angular using the popular javascript library known as XLSX. You can find the link from here

So, let’s see below example here,

Step 1: Create an Angular project by using CLI.

Make an Angular folder and make an angular application with this command.

ng new export-excel
cd export-excel

Step 2: Run the following command and install packages for export excel

This package used for export a data in excel

npm i file-saver
npm i xlsx

Step 3: Add the below code in your app.component.ts file

Open the app.component.ts file and put below code

import { Component, OnInit } from '@angular/core';
import * as FileSaver from 'file-saver';

@Component({
  selector: 'app-excel-data',
  templateUrl: './excel-data.component.html',
  styleUrls: ['./excel-data.component.scss']
})
export class ExcelDataComponent implements OnInit {
  exportList: any[] = [];
  constructor() {
    this.dummyData();
  }

  ngOnInit(): void {
  }

  dummyData() {
    this.exportList = [
      { id: 1, Company: 'Alfreds Futterkiste', Contact: 'Maria Anders', Country: 'Germany' },
      { id: 2, Company: 'Centro comercial Moctezuma', Contact: 'Francisco Chang', Country: 'Mexico' },
      { id: 3, Company: 'Ernst Handel', Contact: 'Roland Mendel', Country: 'Austria' },
      { id: 4, Company: 'Island Trading', Contact: 'Helen Bennett', Country: 'UK' },
      { id: 5, Company: 'Laughing Bacchus Winecellars', Contact: 'Yoshi Tannamuri', Country: 'Canada' },
      { id: 6, Company: 'Magazzini Alimentari Riuniti', Contact: 'Giovanni Rovelli', Country: 'Italy' },
    ]
  }

  exportExcel() {
    if (this.exportList.length > 0) {
      import("xlsx").then(xlsx => {
        const worksheet = xlsx.utils.json_to_sheet(this.exportList);
        const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
        const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' });
        this.saveAsExcelFile(excelBuffer, "ExportExcel");
      });
    }
  }
  saveAsExcelFile(buffer: any, fileName: string): void {
    let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
    let EXCEL_EXTENSION = '.xlsx';
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
  }

}

Step 4: Add the below code in your app.component.html file

<div>
    <input type="button" value="Export To Excel" (click)="exportExcel()"/>
</div><br>
<div>
    <h2>Export Excel</h2>
    <table class="table" style="width: 50%;">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Company</th>
                <th scope="col">Contact</th>
                <th scope="col">Country</th>
            </tr>
        </thead>
        <tbody *ngFor="let item of exportList">
            <td>{{item.id}}</td>
            <td>{{item.Company}}</td>
            <td>{{item.Contact}}</td>
            <td>{{item.Country}}</td>
        </tbody>
    </table>
</div>