npm i xlsx
npm i file-saver
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<p> Exporting an excel file of type .xslx !!! </p> <p>Export as XLSX by clicking the below button</p> <button (click)="exportAsXLSX()"><i class="far fa-file-excel" style="font-size:48px;color:blue"></i></button> <table> <tr> <td>Case Worked</td> <td>Notes</td> <td>ID</td> </tr> <tr *ngFor="let item of groupData"> <td> <div *ngFor="let data of item.data"> <span>{{data.case_worked}}</span> </div> </td> <td> <div *ngFor="let data of item.data"> <span>{{data.note}}</span> </div> </td> <td>{{item.id}}</td> </tr> </table> |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import { Component } from '@angular/core'; import {ExcelService} from './services/excel.service'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { groupData: any; name = 'Angular'; data: any = [{ case_worked: "abc", note: "Test", id: "1234" }, { case_worked: "def", note: "test 1", id: "1234" }, { case_worked: "def", note: "Test 2", id: "3456" }]; constructor(private excelService:ExcelService){ this.groupData = this.organise(this.data); } exportAsXLSX():void { this.excelService.exportAsExcelFile(this.data, 'export-to-excel'); } organise(arr) { var headers = [], // an Array to let us lookup indicies by group objs = [], // the Object we want to create i, j; for (i = 0; i < arr.length; ++i) { j = headers.indexOf(arr[i].id); // lookup if (j === -1) { // this entry does not exist yet, init j = headers.length; headers[j] = arr[i].id; objs[j] = {}; objs[j].id = arr[i].id; objs[j].data = []; } objs[j].data.push( // create clone { case_worked: arr[i].case_worked, note: arr[i].note, id: arr[i].id } ); } return objs; } } |
services/excel.service.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import { Injectable } from '@angular/core'; import * as FileSaver from 'file-saver'; import * as XLSX from 'xlsx'; import * as _ from 'lodash'; const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'; const EXCEL_EXTENSION = '.xlsx'; @Injectable() export class ExcelService { constructor() { } public exportAsExcelFile(json: any[], excelFileName: string): void { const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json); console.log('worksheet',worksheet); const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] }; const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); //const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' }); this.saveAsExcelFile(excelBuffer, excelFileName); } private saveAsExcelFile(buffer: any, fileName: string): void { const data: Blob = new Blob([buffer], { type: EXCEL_TYPE }); FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION); } } |
