Angular2+ Excel Export using Exceljs

<!DOCTYPE html>
<html>
  <head>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="src/main.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/1.5.1/exceljs.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
  </head>

  <body>
    <my-app>
      loading...
    </my-app>
  </body>
</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js';
import 'zone.js/dist/long-stack-trace-zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.js';

platformBrowserDynamic().bootstrapModule(AppModule);

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as Excel from "exceljs/dist/exceljs.min.js";
import * as ExcelProper from "ExcelJS";
import * as FileSaver from 'file-saver';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Excel Export Dashboard</h2>
      <button (click)="exportToExcel()">Export</button>
      <table border="1">
        <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
                <th>Column5</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let x of data">
                <td>{{x.col1}}</td>
                <td>{{x.col2}}</td>
                <td>{{x.col3}}</td>
                <td>{{x.col4}}</td>
                <td>{{x.col5}}</td>
            </tr>
        </tbody>
      </table>
    </div>
  `,
})
export class App {
  name: string;
  sName:string;
  excelFileName:string;
  //blobType: string = "text/plain;charset=utf-8";
  blobType: string = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
  cols =['Column1','Column2','Column3','Column4','Column5']
  data=[{col1:"a1",col2:"b1",col3:"c1",col4:"d1",col5:"e1"},
        {col1:"a2",col2:"b2",col3:"c2",col4:"d2",col5:"e2"},
        {col1:"a3",col2:"b3",col3:"c3",col4:"d3",col5:"e3"},
        {col1:"a4",col2:"b4",col3:"c4",col4:"d4",col5:"e4"},
        {col1:"a5",col2:"b5",col3:"c5",col4:"d5",col5:"e5"}
        ]
  constructor() {
    this.sName = 'SheetTest';
    this.excelFileName = 'TestExcelExport.xlsx';
  }
  exportToExcel()
  {
    var workbook = new Excel.Workbook();
    workbook.creator = 'Web';
    workbook.lastModifiedBy ='Web';
    workbook.created = new Date();
    workbook.modified = new Date();
    workbook.addWorksheet(this.sName, { views: [{ state: 'frozen', ySplit: 3, xSplit: 2, activeCell: 'A1', showGridLines: false }] })
    var sheet = workbook.getWorksheet(1);
    var head1 = ["Exported Data"];
    sheet.addRow(head1);
    sheet.addRow("");
    sheet.getRow(3).values = this.cols;
    sheet.columns = [
      { key: 'col1' },
      { key: 'col2' },
      { key: 'col3' },
      { key: 'col4' },
      { key: 'col5' }
    ];
    sheet.addRows(this.data);
    workbook.xlsx.writeBuffer().then(data => {
      var blob = new Blob([data], { type: this.blobType });
      var url = window.URL.createObjectURL(blob);
      var a = document.createElement("a");
      document.body.appendChild(a);
      a.href = url;
      a.download = this.excelFileName;
      a.click();
      //adding some delay in removing the dynamically created link solves the problem in FireFox
      //setTimeout(function() {window.URL.revokeObjectURL(url);},0);
      //FileSaver.saveAs(blob, this.excelFileName, true);
    });
  }
}


@NgModule({
  imports: [BrowserModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {

}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.0",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^5.2.4",
        "@angular/compiler": "^5.2.4",
        "@angular/core": "^5.2.4",
        "@angular/platform-browser": "^5.2.4",
        "@angular/platform-browser-dynamic": "^5.2.4",
        "core-js": "^2.5.3",
        "rxjs": "^5.5.6",
        "zone.js": "^0.8.20",
        "exceljs": "^1.5.1",
        "file-saver": "^1.3.8"
    },
    "plnkr": {
        "runtime": "system"
    }
}