Skip to main content

How To Export Excel With Angular

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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