JQuery HTML İçeriği Excel’e Aktarma Uygulaması {Javascript}

Merhaba, normalde veri listeleme işlemleri için json API ile çalışan kullanımı oldukça kolay olan jquery datatable kullanıyorum. Aslına bakarsanız datatable içerisinde export seçenekleri aktif hale getiren bir opsiyonel seçenek mevcut. Bu da oldukça kullanılabilir bir işlem.

Ama benim gerçekleştirdiğim sistemde datatable içerisindeki hücrelere sonradan müdahalede bulunuluyor. Yani başlangıçta boş olan hücreler sonradan dışarıdan müdahale edilerek dolu hale getiriliyor. Dolayısıyla excel export aldığınızda ilgili hücreleri boş getiriyor doğal olarak. Hal böyle olunca yeni seçenekleri araştırmaya koyuldum. HTML tablo içeriğinden excel’e dönüşüm sağlayan bir kütüphane keşfettim. Kullanımı olukça basit. Yazının devamından kodlara erişebilirsiniz. Haydi başlayalım!

Öncelikle buradan jquery table2excel kütüphanesini temin edelim.

Aşağıdaki 2 dosyanın sisteminizde yüklü olması gerekiyor.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/jquery.table2excel.js"></script>

1 2	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="src/jquery.table2excel.js"></script>

Örnek tablomuzu oluşturalım. (İçerikleri dilediğinizce değiştirebilirsiniz. Tablo ID bilgisine dikkat edelim.)

<table class="table" id="table2excel">
      <thead>
        <tr class="noExl">
          <th>#</th>
          <th>Ad Soyad</th>
          <th>Kullanıcı Adı</th>
          <th>Durum</th>
        </tr>
        <tr>
          <th>#</th>
          <th>Fatih Soysal</th>
          <th>fatih</th>
          <th>Aktif</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>1</td>
          <td>Okan Yılmaz</td>
          <td>okkan</td>
          <td>Pasif</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Ömer Kılıç</td>
          <td>omer</td>
          <td>Aktif</td>
        </tr>
        <tr class="success">
          <td>3</td>
          <td>Selim Dündar</td>
          <td>selim2433</td>
          <td>Aktif</td>
        </tr>
      </tbody>
    </table>

<thead>

<th>Ad Soyad</th>

<th>Kullanıcı Adı</th>

<th>Durum</th>

</tr>

<tr>

<th>Fatih Soysal</th>

<th>fatih</th>

<th>Aktif</th>

</tr>

</thead>

<tbody>

<td>Okan Yılmaz</td>

<td>okkan</td>

<td>Pasif</td>

</tr>

<tr>

<td>Ömer Kılıç</td>

<td>Aktif</td>

</tr>

<td>Selim Dündar</td>

<td>selim2433</td>

<td>Aktif</td>

</tr>

</tbody>

</table>

Excel export alabileceğimiz basit bir export butonu oluşturalım.

<button>Excel Export Al</button>

1	<button>Excel Export Al</button>

İlgili butona tıklandığında kütüphaneyi çağıralım ve dönüştürme işlemini başlatalım.

$("button").click(function(){
  $("#table2excel").table2excel({
    // noExl class'ına sahip satırı hariç tutar
    exclude: ".noExl", 
    name: "Kitap Adı",
    filename: "ExportUsers" //Uzantı dahil etmeyin.
  }); 
});