การเขียนไฟล์ Excel ด้วย Angular 9

สวัสดีครับ ในบทความนี้ ผมขอนำเสนอการสร้างไฟล์ XLSX โดยใช้ Library ที่ชื่อว่า XLXS   กับ Frontend Framework อย่าง Angular กัน สืบเนื่องจากเมื่อก่อนผมจะเขียนโปรแกรมในส่วน Backend ให้ Export ไฟล์ให้ แต่ก็จะเจอปัญหาว่าถ้าไฟล์มันใหญ่ไป อย่างเช่นกว่า 1 แสน records ก็จะไปกระทบการทำงานของ Server และถ้า users หลายๆ คนกด Export ไฟล์ในช่วงเดียวกัน ก็อาจจะทำให้เครื่องค้างไปเลยก็ได้

มันก็เลยเป็นที่มาว่าทำไมต้องให้ Frontend หรือก็คือเครื่องของ cliend เป็นคน Export ไฟล์แทน ซึ่งจากการทดลองก็พบว่าได้ผลลัพธ์ที่น่าพอใจ เอาละครับวิธีการใช้งานจะเป็นยังไงนั้นมาดูกันเลย

บทความนี้ประกอบด้วย

1. การ Setup Environment
2. วิธีการเขียนโปรแกรม เพื่อใช้งาน xlsx
3. การเขียนโปรแกรมเพื่อ Export ไฟล์ (แบบง่ายๆ ^.^)

Source Code

https://github.com/kdbeer/ng-xlsx-example

1. การ Setup Environment

ในส่วนของการติดตั้งโปรแกรม เราจำเป็นต้องมี Environment ดังนี้ครับ 

• ติดตั้ง NodeJS Version 12
• Angular 9 (จริงๆ มัน Suport ตั้งแต่ Angular 2 แล้วนะครับ)
• File saver
• XLSX

การติดตั้ง ​NodeJS

เอาละครับ เริ่มจากติดตั้ง Node JS ก่อนเลย ซึ่งตรงนี้ผมจะไม่ลงรายละเอียดนะครับ เพราะว่ามีคนเขียนเยอะละ และอีกอย่างมันก็ขึ้นอยู่กับ OS ของแต่ละท่านด้วย เอาเป็นว่าผมแนะนำวิธีการจากลิงก์ต่อไปนี้ละกันครับ

https://nodejs.org/en/download/package-manager/

การติดตั้ง Angular 9

npm install -g @angular/cli

จากนั้น เราจะสร้าง Angular Project ขึ้นมา โดยใช้ คำสั่งต่อไปนี้นะครับ หลังจากทำการสร้างโปรเจกเสร็จแล้ว ให้เราเข้าไปที่ Folder ของโปรเจกที่เราเพิ่งจากสร้างขึ้นมา

ng new ng-xlsx-example

แล้วมันจะถามว่า

Would you like to add Angular routing? (Y/N)

ให้เราตอบ Y ไป

แล้วมันจะถามต่อว่า

Which stylesheet format would you like to use?

คือมันจะถามว่า เราจะใช้ css แบบไหน อันนี้ให้เราเลือกได้ตามใจเลยครับ แต่ถ้าจะทำโปรเจกในอนาคต ผมแนะนำว่าให้เลือกเป็น SCSS ไป

จากนั้นก็ให้เรา cd เข้าไปที่โปรเจคดังกล่าว

cd ng-xlsx-example

ติดตั้ง File saver

ซึ่ง Library ตัวนี้ จะใช้ให้เรา Save File ที่เราสร้างขึ้นมา

npm install file-saver --save

ติดตั้ง xlsx npm module

อันนี้คือพระเอกของเรานั่นเองครับ ที่จะช่วยให้เราสามารถ convert json ไปสู่ spreadsheet  ได้

npm install xlsx --save

2. วิธีการเขียนโปรแกรม เพื่อใช้งาน XLSX

ทีนี้ก็เป็นการเขียนโปรแกรมแล้วนะครับ ซึ่งหลังจากเราสร้างโปรเจคขึ้นมาแล้ว เราก็จะได้ structure ประมาณนี้นะครับ

ng-xlsx-example/src

src
├── app
│				├── app-routing.module.ts
│				├── app.component.html
│				├── app.component.scss
│				├── app.component.spec.ts
│				├── app.component.ts
│				└── app.module.ts
├── assets
├── environments
│				├── environment.prod.ts
│				└── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.scss
└── test.ts

ผมจะทำการแก้ ไฟล์ที่ชื่อว่า 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';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'ng-xlsx-example';
  employee = [
    { name: 'Shyam', email: 'shyamjaiswal@gmail.com' },
    { name: 'Bob', email: 'bob32@gmail.com' },
    { name: 'Jai', email: 'jai87@gmail.com' },
  ];

  exportToExcel() {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.employee);
    const workbook: XLSX.WorkBook = {
      Sheets: { Sheet1: worksheet },
      SheetNames: ['Sheet1'],
    };

    const excelBuffer: any = XLSX.write(workbook, {
      bookType: 'xlsx',
      type: 'array',
    });

    const data: Blob = new Blob([excelBuffer], { type: EXCEL_TYPE });
    const date = new Date();
    const fileName = 'example.xlsx';

    FileSaver.saveAs(data, fileName);
  }
}

จากนั้นให้เราแก้ไฟล์ app.component.html ดังนี้ครับ

<h3>ทดลอง Export XLSX ด้วย Angular</h3>

<button (click)="exportToExcel()">Export</button>

อธิบายเพิ่มเติมนะครับ อ้างอิงจากไฟล์ app.component.ts เริ่มจากเรา Import library เข้ามาก่อน 

import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';

จากนั้นสร้าง Array ที่ชื่อว่า exployee ที่เป็น JSON ที่มีข้อมูลดังนี้

  employee = [
    { name: 'Shyam', email: 'shyamjaiswal@gmail.com' },
    { name: 'Bob', email: 'bob32@gmail.com' },
    { name: 'Jai', email: 'jai87@gmail.com' },
  ];

จากนั้นก็สร้างฟังก์ชันที่ชื่อว่า exportToExcel() เพื่อใช้ในการConvert Json ไปสู่ไฟล์

  exportToExcel() {
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.employee);
    const workbook: XLSX.WorkBook = {
      Sheets: { Sheet1: worksheet },
      SheetNames: ['Sheet1'],
    };

    const excelBuffer: any = XLSX.write(workbook, {
      bookType: 'xlsx',
      type: 'array',
    });

    const data: Blob = new Blob([excelBuffer], { type: EXCEL_TYPE });
    const date = new Date();
    const fileName = 'example.xlsx';

    FileSaver.saveAs(data, fileName);
  }

จากทั้งหมดที่กล่าวมา จะได้ผลลัพธ์ประมาณนี้ครับ

ผลลัพธ์จากไฟล์ Excel

เอาละครับ ทั้งหมดคือวิธีการใช้งาน XLSX กับ Angular หวังว่าจะเป็นประโยชน์ต่อผู้อ่านไม่มากก็น้อยนะครับ

REFERENCE

https://medium.com/@madhavmahesh/exporting-an-excel-file-in-angular-927756ac9857

https://www.npmjs.com/package/file-saver

https://www.npmjs.com/package/xlsx