'How to download html table to excel in angular with style

I am able to download table data in excel using xlsx and file-save, however I want to download data with styles in excel (So if my text is bold, if it has alignment, or color etc.)

My app.component.ts

import { Component } from '@angular/core';
import { ExcelServiceService } from './services/excel-service.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'exportExcelInAngular';
  dataOfFootballers: any = [{
    playerName: 'Cristiano Ronaldo',
    playerCountry: 'Pourtgal',
    playerClub: 'Juventus'
  },
  {
    playerName: 'Lionel Messi',
    playerCountry: 'Argentina',
    playerClub: 'Barcelona'
  }];

  constructor(private excelService:ExcelServiceService) {}
  exportAsXLSX():void {
    this.excelService.exportAsExcelFile(this.dataOfFootballers, 'footballer_data');
  }
}

My excelServiceService.ts

import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';

@Injectable({
  providedIn: 'root'
})
export class ExcelServiceService {

  constructor() { }

  public exportAsExcelFile(json: any[], excelFileName: string): void {

    const myworksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
    const myworkbook: XLSX.WorkBook = { Sheets: { 'data': myworksheet }, SheetNames: ['data'] };
    const excelBuffer: any = XLSX.write(myworkbook, { bookType: 'xlsx', type: 'array' });
    this.saveAsExcelFile(excelBuffer, excelFileName);
  }

  private saveAsExcelFile(buffer: any, fileName: string): void {
    const data: Blob = new Blob([buffer], {
      type: EXCEL_TYPE
    });
    FileSaver.saveAs(data, fileName + '_exported'+ EXCEL_EXTENSION);
  }
}

My app.component.html

<b>Exporting footballer data in excel by clicking below button</b><br>

<button (click)="exportAsXLSX()">
<i class="fa fa-file-excel-o" style="font-size:48px;color:blue"></i></button>

<table class="table table-striped">
  <tr>
    <td><b>Player Name</b></td>
    <td><b>Player Country</b></td>
    <td><b>Player Club</b></td>
  </tr>
  <tbody>
    <tr *ngFor="let item of dataOfFootballers">
      <td>{{item.playerName}}</td>
      <td>{{item.playerCountry}}</td>
      <td>{{item.playerClub}}</td>
    </tr>
  </tbody>
</table>

This does work, but i cant see the bold letters in excel. This is just example, later on i want to add margin to column element and I want same to appear in excel.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source