Export ข้อมูล JSON เป็น Excel ง่ายๆ ฉบับ Vue JS

Chonlatit (Karn)
Sep 16 · 2 min read

ในยุคนี้ที่ JavaScript กำลังมาแรงในทุกๆ แห่งหน และสำหรับ library ที่กำลังมาแรงมากๆ และก็มีแนวโน้มที่จะพุ่งขึ้นเรื่อยๆ อย่าง Vue JS ก็มี Developer มากมายให้ความสนใจ และในบทความนี้ผมก็จะมาแนะนำวิธี export ข้อมูล JSON เป็น Excel ง่ายๆ ใน Vue JS ด้วย package ที่ชื่อว่า xlsx ครับ มาลองดูกันครับว่าจะง่ายขนาดไหน

Export ข้อมูล JSON เป็น Excel ด้วย Vue JS
Export ข้อมูล JSON เป็น Excel ด้วย Vue JS
Export ข้อมูล JSON เป็น Excel ด้วย Vue JS

มารู้จักกับ xlsx ซักหน่อย

หากถามว่าทำไมถึงแนะนำให้ใช้ package นี้ ก็เพราะว่า package นี้มีการอัพเดทเวอร์ชันเรื่อยๆ มี star ใน github เยอะพอสมควร และที่สำคัญมีการทดสอบการใช้งานกับ browsers ว่า xlsx นี้สามารถ support กับ browser ไหนบ้าง ซึ่งผลที่เจ้าของ package เขาเคลมมาก็คือตามรูปด้านล่างนี้เลยครับ

browsers ที่ support xlsx
browsers ที่ support xlsx
browsers ที่ support

สังเกตุจะเห็นว่า xlsx นั้น support browsers เกือบทั้งหมดดังนั้นจึงเป็นเรื่องดีครับที่จะเลือกใช้ package นี้ รายละเอียดเพิ่มเติมลองอ่านดูได้ที่ https://github.com/SheetJS/js-xlsx ได้เลยครับ

เริ่มทำ Export ข้อมูล JSON เป็น Excel กับ Vue JS กันเลยครับ

สำหรับบทความนี้เราจะมาแนะนำแค่วิธีการทำ export เป็น Excel นะครับ ซึ่งความจริงแล้ว xlsx นั้นมี features ให้ใช้งานมากมาย เช่น ไฟล์ csv หรือการใช้งานการตกแต่งความสวยงามต่างๆ สำหรับ Excel ก็มีให้เราสามารถจัดการได้อย่างง่ายดายครับ แต่ในบทความนี้เรามาทดสอบการสร้างไฟล์ Excel ด้วยข้อมูล JSON แบบง่ายๆ กันครับ

สร้าง Project Vue JS ขึ้นมาใหม่

หากใครที่ยังไม่ได้ติดตั้ง @vue/cli ให้ติดตั้งก่อนครับ

npm i -g @vue/cli

หลังจากนั้นก็สร้าง project ชื่อว่า export-excel

vue create export-excel

เมื่อได้แล้วก็ลองรันคำสั่ง

npm run serve

เมื่อรันคำสั่งแล้วให้ลองเข้า http://localhost:8080 จะเห็นหน้าเว็บแบบนี้ครับ

หน้าเว็บที่ได้จาก vue create
หน้าเว็บที่ได้จาก vue create
หน้าเว็บที่ได้จาก vue create

ติดตั้ง xlsx

เมื่อสร้าง project สำเร็จแล้วก็ติดตั้ง xlsx ได้เลยครับ พิมพ์คำสั่งตามนี้เลยครับ

npx install xlsx

เมื่อเสร็จแล้วให้เข้าไปแก้ไฟล์ root/src/App.vue และแก้โค้ดให้เป็นดังนี้

ไฟล์ App.vue

เมื่อแก้โค้ดเป็นแบบใหม่แล้วให้ลองกดปุ่ม export ดูครับ เราจะสามารถดาวน์โหลดไฟล์ Excel ได้แล้ว และเมื่อเปิดด้วยโปรแกรม Excel ก็จะได้ดังนี้

ไฟล์ excel ที่ export

แค่นี้เราก็สามารถทำ Export Excel จากข้อมูล JSON ง่ายๆ ด้วย Vue JS ได้แล้วครับ เห็นมั้ยล่ะครับง่ายมากๆ แต่อย่างไรก็ตามหากใครที่ต้องการตกแต่ง cel ให้สวยงามมากกว่านี้ก็ลองเข้าไปอ่าน document จากเว็บหลักได้เลยครับ

I GEAR GEEK

Chonlatit (Karn)

Written by

I GEAR GEEK

เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ มีประสบการณ์จากการทำงานจากทั้งในและนอกประเทศอย่างโชกโชน แต่ถ้าพวกเราเขียนโปรแกรมเพื่อจบงานไปอย่างเดียวมันก็ไม่สนุก พวกเราเลยรวมตัวกันขึ้นมาเปิดเป็นบริษัท Startup ที่มีชื่อว่า I GEAR GEEK ในจังหวัดเชียงใหม่นี้

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade