Vuejs Json Excel’e Aktarma

Vuejs Json Excele Aktarma

Herkese merhabalar bu yazımızda sizlerle beraber json verilerimizi vue-excel-export paketinin yardımıyla excele nasıl aktarabiliriz onu gösteriyor olacağım.

Proje Oluşturma;

Vue Cli kullanarak proje oluşturmak için 
vue create hello-world

ardından bağımlılığımızı yüklüyoruz;

npm install --save vue-excel-export

bağımlılığımızı yükledikten sonra src/main.js dosyama gelip

import excel from 'vue-excel-export'
Vue.use(excel)

componentimi global olarak register ediyorum daha sonra src/app.vue dosyama gelip

<export-excel :data=”jsonDatam” :fields=”jsonProperties” :name=”excel_name” :worksheet=”work_sheet_name”>
 Excel’e Aktar
</export-excel>

componentimi kullanıyorum componentimin kullanacağı json verileri

jsonDatam:[
{
id:1,
name:"Yasin",
surname:"Dalkılıç",
age:30,
phone:{
home:'435345345',
work:'45645645'
},
birthDate:new Date()
},{
id:2,
name:"Ahmet",
surname:"Dalkılıç",
age:22,
phone:{
home:'345345',
work:'435435'
},
birthDate:new Date()
},{
id:3,
name:"Selin",
surname:"Dalkılıç",
age:22,
phone:{
home:'123213',
work:'324234'
},
birthDate:new Date()
}]

adındında bir jsondan alacağını , daha sonra fieldslarının json properties olacağını söylüyorum. Paketimiz bize ilgili fieldi formatlamamız için callback fonksiyonuda içerisinde barındırıyor.

jsonProperties:{
"Kullanıcı Numarası":'id',
"Kullanıcı Adım":'name',
"Kullanıcı Soyadı":'surname',
"Kullanıcı Yaşı":'age',
"Kullanıcı Ev Telefonu":'phone.home',
"Kullanıcı İş Telefonu":'phone.work',
"Dogum Tarihi":{
field:'birthDate',
callback:(value)=>{
return "Dogum Tarihi : " +new Intl.DateTimeFormat('tr-TR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(value)
}}},

ve son olarak excel dosyasını adı ve worksheet name alanını belirtiyorum.

work_sheet_name:"Kullanıcı Çalışması",
excel_name:"Kullanıcılar",

Şimdi sayfamızı açıp excele aktara tıkladığımız zaman ilgili verilerimizin vermiş olduğumuz kurallara göre excel’e aktarıldığını görüyor olacağız.

Herkese İyi Çalışmalar Dilerim.