Merhabalar,

Angular projemizde Excel dosyasını import etme ve export etme işlemleri nasıl yapılır bunu anlatmak istiyorum. Bu işlemler için "xlsx" adında bir paket kullanacağız. Aynı paketi Nodejs, Ionic, React, Vue gibi projelerinizde de kullanabilirsiniz.


Şöyle bir örnek üzerinden Angularda Excel kullanımını anlatmaya geçelim;

Varsayalım ki bir kursa ait yönetim panelimiz var. Burada öğrencilerin kayıtları açılıyor ve işlemler yapılıyor. Öğrenci kayıtları formdan eklenebildiği gibi birde excel ile eklenebilsin. Eklenmiş olan öğrencilerin listesini birde dışa aktaralım ve excel dosyası elde edelim.


Projeyi nasıl oluşturacağız componentleri nasıl oluşturacağız vs. bu adımları geçiyorum.


Angular Excel Import;


Öncelikle xlsx paketimizi kuruyoruz;

npm install xlsx


Kurulumdan hemen sonra bu paketi kullanacağımız componentte import ediyoruz;

import * as XLSX from 'xlsx';


Şimdi inputtan excel dosyası yüklendiğinde çalışacak methodu yazıyoruz;

fileExcelUpload(file) {
  /* wire up file reader */
  const target: DataTransfer = <DataTransfer>(file.target);
  if (target.files.length !== 1) throw new Error('Cannot use multiple files');
  const reader: FileReader = new FileReader();
  reader.onload = (e: any) => {
    /* read workbook */
    const bstr: string = e.target.result;
    const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});

    /* grab first sheet */
    const wsname: string = wb.SheetNames[0];
    const ws: XLSX.WorkSheet = wb.Sheets[wsname];
    /* save data */
    const data = <any>(XLSX.utils.sheet_to_json(ws, {header: 1}));
    console.log(data);
  };
  reader.readAsBinaryString(target.files[0]);
  file.target.value = '';
}


Şimdide bu methodun çalışacağı inputu hazırlayalım;

<input type="file" (change)="fileExcelUpload($event)" multiple="false" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">


Evet şuan temeli hazırladık ve neler yaptık özetleyelim;

  • xlsx paketini kurduk ve kullanacağımız komponentin .ts dosyasında import ettik,
  • excel dosyası inputtan yüklendikten sonra çalışacak olan fonksiyonu yazdık ve yüklenecek excel dosyasında neler olduğunu konsolda görmek için console.log(data) yı yazdık.
  • excel dosyasını yükleyeceğimiz file tipinde inputu html dosyasında yazdık.


Şimdi bilgisayarımızda bir excel dosyası açalım ve içine bir kaç satır veri ekleyelim. (Sütun sıralamaları aynı olursa yapacağımız örnek için problemsiz çalışmış olacaktır. Kendinize göre düzenlemesinide yapabilirsiniz.)


Oluşturduğumuz bu excel dosyasını inputtan seçelim ve konsolu açıp bakalım neler olmuş;


Eveeet. Şimdi bu verileri istediğimiz gibi kullanabiliriz. Gördüğünüz gibi konsoldaki dizinin ilk elemanında sütun isimleri yazıyor. Biz o kısmı almayalım, bunun için fileExcelUpload(file) methodumuzda datayı slice ederek ilk elemanı sildirebiliriz. Yani fileExcelUpload methodunda console.log(data) satırının bir üstüne şunu ekleyelim;

data.splice(0, 1);


Bu satırı ekledikten sonra aynı excel dosyamızdan aldığımız konsol kaydı şu şekilde olacaktır;


Angular ile Excel dosyası import etme işlemi bu kadar basit. Şimdi mevcut bir verinin dışa aktarılmasına geçelim



Angular Excel Export;


İlk olarak students diye bir dizi oluşturalım ve içine bir kaç veri ekleyelim.

students = [
  { name: 'Mehmet', surname: 'Sert', phone: '(444) 444 44 44', mail: '[email protected]', startDate: '09.08.2019' },
  { name: 'Yusuf', surname: 'Borucu', phone: '(444) 444 44 44', mail: '[email protected]', startDate: '09.08.2019' },
  { name: 'Fatih', surname: 'Kobacık', phone: '(444) 444 44 44', mail: '[email protected]', startDate: '09.08.2019' },
  { name: 'Ali', surname: 'Veli', phone: '(444) 444 44 44', mail: '[email protected]', startDate: '09.08.2019' }
];


Şimdi bu verileri excel'e aktarmayı sağlayacak methodu yazalım;


excelExport() {
  /* generate worksheet */
  const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.students);

  /* generate workbook and add the worksheet */
  const wb: XLSX.WorkBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Öğrenciler');

  /* save to file */
  XLSX.writeFile(wb, 'ogrenci-listesi.xlsx');
}

Burada;

  • 'Öğrenciler' yazdığım bölüme istediğiniz bir şeyi yazabilirsiniz. Excel dosyasında sayfanın başlığı olarak görünecek.
  • ogrenci-listesi.xlsx yazdığım yerde ise inecek olan excel dosyasının adını belirtiyoruz. ogrenci-listesi yerine istediğiniz bir dosya ismi yazabilirsiniz.


Şimdi bu methodu tetikleyecek butonumuzu html dosyasında ekleyelim;

<button (click)="excelExport()">Excel'e aktar</button>


Eveet buda bu kadar.

Artık bu butona tıkladığımızda excel dosyamız inecek ve şöyle bir görüntü bizi karşılıyor olacak;


Burada farklı işlemler yapmak isterseniz kullandığımız paketi ve dökümantasyonunu aşağıdaki linklerden inceleyebilirsiniz;

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

Angular veya Ionic için dökümantasyon: https://github.com/SheetJS/js-xlsx/blob/HEAD/demos/angular2/


Umarım faydalı olur.