How To Export Excel With Angular

สวัสดีครับ วันนี้เราจะมาแนะนำการ Export ข้อมูลเป็นไฟล์ Excel ด้วย Angular กันครับ

ก่อนอื่น เรามาสร้าง Project Angular กันก่อนดีกว่าครับ

สำหรับการติดตั้ง Angular จะต้องมีการติดตั้ง Angular cli ก่อนครับ หากใครติดตั้งแล้วข้ามไปได้ครับ

npm install -g @angular/cli

สร้าง Project ใหม่ที่มีชื่อว่า excel

ng new excel

สำหรับใครที่ยังไม่เคยติดตั้ง ตอนสร้าง Project จะมีถามอยู่ 2 – 3 ขั้นตอน ตอบ y และ เลือก css ดังภาพ

เลือก css แล้วกด enter

จากนั้น รอติดตั้ง สักครู่

เมื่อติดตั้งเสร็จแล้ว เราจะมาติดตั้ง Libary เพิ่มเติมอีกดังนี้ครับ

npm i xlsx

npm i file-saver

เมื่อติดตั้งเรียบร้อยแล้ว ng serve เพื่อรัน Angular ได้เลยครับ

ในส่วนต่อมาเรามาเขียน Code ใน angular เพื่อ Export Excel กันครับ

ไฟล์ D:/angular/excel/src/app/app.component.ts

import { Component} 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';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent{
	
	title = 'excel';
	
	data: any = [{
		code: "EMP1001",
		name: "USER1",
		age: 18,
		address: "Bangkok"
	}, {
		code: "EMP1002",
		name: "USER2",
		age: 18,
		address: "Bangkok"
	}, {
		code: "EMP1003",
		name: "USER3",
		age: 18,
		address: "Bangkok"
	}, {
		code: "EMP1004",
		name: "USER4",
		age: 18,
		address: "Bangkok"
	}];
  
	constructor() { }
  

	downloadExcel(){
		
		let header = [{ 
          A: "รหัส",
          B: "ชื่อสกุล", 
          C: "อายุ", 
		  D: "ที่อยู่"
		}];
		
	    this.exportAsExcelFile(this.data,header, 'excel');
	}
  

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

    var worksheet = XLSX.utils.json_to_sheet(headerText, {header: [], skipHeader: true});

		XLSX.utils.sheet_add_json(worksheet, json, {skipHeader: true, origin: "A2"});
		
		const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
		
		const excelBuffer: any = XLSX.write(workbook, { 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 + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
  }

  
}

ในตัวอย่างนี้จะแก้ไขที่ไฟล์ app.component เลยครับ สำหรับใครที่ต้องการประยุกต์ใช้งานกับส่วนอื่น ๆ อาจนำ Code การ Export Excel สร้างเป็น Service ไว้เพื่อให้ Component อื่น ๆ เรียกใช้งานได้ง่ายครับ

แก้ไขไฟล์ D:/anguolar/excel/src/app/app.component.css

table, th, td{
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    border-right: 1px solid #000;
    text-align: center;
}
table{
    border-collapse:collapse;
    width:100%;
}
th, td{
    text-align:left;
    padding:10px;
    text-align: center;
}

a{
	text-decoration:none;
	color:white;
	background:#555;
	padding:10px;
	border-radius:10px;
	font-size:20px;
}

เพิ่ม css การแสดงผลตาราง

แก้ไขไฟล์ D:/angular/excel/src/app/app.component.html

<div class="content" role="main">

<table>
	<thead>
		<tr>
			<th>รหัส</th>
			<th>ชื่อ</th>
			<th>อายุ</th>
			<th>ที่อยู่</th>
		</tr>
	</thead>
	<tbody>
		<tr *ngFor="let r of data">
			<td>{{ r.code }}</td>
			<td>{{ r.name }}</td>
			<td>{{ r.age }}</td>
			<td>{{ r.address }}</td>
		</tr>
	</tbody>
</table>
<p>
	<a href="#" (click)="downloadExcel()" style="">Export Excel</a>
</p>

</div>

ในส่วนของการแสดงผล จะมีการแสดงข้อมูลในตาราง และมีปุ่มคลิก Export Excel เรียกฟังชั่น downloadExcel()  เพื่อทำการ Export Excel ต่อไป

ตัวอย่างการทำงาน URL http://localhost:4200

หากไม่มีอะไรผิดพลาด เมื่อคลิกปุ่ม Export Excel จะได้ไฟล์ .xlsx ดังภาพครับ