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

Chonlatit (Karn)
Sep 16, 2019 · 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 นั้น 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 ก็จะได้ดังนี้

Image for post
Image for post
ไฟล์ excel ที่ export

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

I GEAR GEEK

เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ…

Chonlatit (Karn)

Written by

I GEAR GEEK

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

Chonlatit (Karn)

Written by

I GEAR GEEK

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store