Tutorial: how to do an excel download of objects in Typescript

I was doing this project with a little excel download in Typescript, and figured it would be great to share it.

Stack: Angular + Ionic & Typescript

In my template mycomponent.component.html I just have this little button with a function call:

<ion-button color="secondary" (click)="downloadFile()">
  <ion-icon name="download-outline" color="dark" class="mr-2"></ion-icon> {{ 'cta_export_to_csv'|translate }}
</ion-button>

 Then, in my mycomponent.component.ts, on top I import this package:

import * as FileSaver from 'file-saver';

My method is the following. I have Favorite objects which have just a title and id:

  downloadFile() {
    const data = this.favorites;
    const processedData: { id: number, title: string }[] = [];
    data.forEach((note: Note) => {
      processedData.push({
        id: favorite.id,
        title: favorite.title,
      });
    });
    const dataParsed = JSON.stringify(processedData);
    const JSobj = JSON.parse(dataParsed);
    console.log(JSobj);
    const header = Object.keys(processedData[0]);
    const csv = JSobj.map((row: Favorite) =>
      header
        .map((fieldName) => row[fieldName as keyof Favorite])
        .join(';')
    );
    csv.unshift(header.join(';'));
    const csvArray = csv.join('\r\n');

    const a = document.createElement('a');
    const blob = new Blob([csvArray], { type: 'application/vnd.ms-excel;charset=utf-8' });
    FileSaver.saveAs(blob, 'favorites.xls');
  }

The result is a csv download of the object list. Pretty easy and quick!