Javascript İle Tabloyu CSV’ye Aktarma

Javascript ile tabloyu csv’ye aktarma işleminin nasıl yapılacağından bahsedeceğim. Bu işlem için ekstra bir eklenti ve kütüphane kullanmadan gerçekleştireceğiz. Aktarma işlemi, web uygulamasındaki veri listelemelerinde kullanılmaktadır. Kullanıcıların verileri çevrimdışı kullanımı için listesli bir biçimde dosya olarak indirmesini sağlayacağız.

Verilerin listeli biçimde aktarıldığı dosya biçimi CSV’dir. CSV’ye aktarılarn verileri bir çok web uygulamalarında kullanabilirsiniz. WordPress’ten tutunda bir çok hazır sistemde kullanmanız mümkündür.

Verileri CSV’ye aktarmak için, herhangi bir jQuery eklentisi kullanmadan javascript ile gerçekleştirebilirsiniz. Bu eğitimde, tabloda yer alan verileri JavaScript ile CSV’ye nasıl aktarılacağındanbahsedeceğim.

HTML Bölümü

Bu bölümde HTML tabloyu ve işlemi gerçekleştirmemizi sağlayacak olan butonu oluşturacağız. Sonrasında javascript kodlarını yazarak csv’ye aktarma işlemini gerçekleştireceğiz.

<table>
    <tr>
        <th>Kitap Adı</th>
        <th>Yazar</th>
    </tr>
    <tr>
        <td>Her Yönüyle PHP</td>
        <td>ibrahim Çevrük</td>
    </tr>
    <tr>
        <td>Serenad</td>
        <td>Zülfü Livaneli</td>
    </tr>
    <tr>
        <td>Hayvan Çiftliği</td>
        <td>George Orwell</td>
    </tr>
</table>

Yukarıdaki tabloda, kitap ve yazalarına ilişkin bir listeleme yer almaktadır. Bu tabloyu CSV’ye aktararak farkı platformlar için kullanılmasını sağlayacağız. Tabi öncelikle bu işlemi tetikleyecek olan butonu oluşturalım.

<button onclick="csvAktar('kitapveyazar.csv')"> CSV'ye AKTAR </button>

Örnekte yer aldığı gibi butonu da onclick ile tetkiklenecek biçimde hazırladık. Buton tıklatıldığında csvAktar() isimli fonksiyon çalışacaktır. Bu fonksiyon bir parametre almaktadır. Aldığı parametre de csv’ye dönüştürülen dosyanın adıdır.

Javascript Bölümü

Bu bölümde de javascript kodlarını yazarak butona basıldığında verilerin işlenip CSV olarak indirilmesini sağlayacağız. Bu işlemi iki fonksiyon ile gerçekleştireceğiz. İlk olarka csvAktar() fonksiyonu ile verileri okutacağız, sonrasında bu verileri de csvIndir() fonksiyonuna göndererek, CSV’ye aktarılmasını sağlayacağız.

function csvIndir(csv, filename) {
    var csvFile;
    var downloadLink;
    // CSV dosyası oluşturduk
    csvFile = new Blob([csv], {type: "text/csv"});
    // İndirme Linkini oluşturuyoruz.
    downloadLink = document.createElement("a");
    // dosya adını aldık.
    downloadLink.download = filename;
    // linke dosyayı tanımladık.
    downloadLink.href = window.URL.createObjectURL(csvFile);
    // Linki gizledik.
    downloadLink.style.display = "none";
    // Body alanına linki ekledik.
    document.body.appendChild(downloadLink);
    // linke tıklattık, dosya indirilecektir.
    downloadLink.click();
}

Yukarıda ilk olarak gönderilen parametreler doğrultusunda csv dosyasının indirilmesini sağladık. Parametre olarak göndermiş olduğumuz csv ile ikinci bir fonksiyondan değerleri alıp, aktarmamız gerekecektir. İkinci parametre ise indirilecek olan dosyanın adıdır.

function csvAktar(filename){
   var csv = [];
   var rows = document.querySelectorAll("table tr");
   for (var i = 0; i < rows.length; i++){
      var row = [], cols = rows[i].querySelectorAll("td, th");
      for (var j = 0; j < cols.length; j++){
      row.push(cols[j].innerText);
      }
      csv.push(row.join(","));        
   }
   csvIndir(csv.join("\n"), filename);
}

Bu fonksiyon ile de HTML etiketi olan TABLE okutup, verileri diziye aktarıyoruz. Hazırlanan diziyi de csvIndir() fonksiyonuna parametre olarak gönderiyoruz. Bu işlemler doğrultusunda Tablodaki verileri CSV olarak indirmiş olacağız.