'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 |
---|