React İle Web Uygulamaları İçin Dinamik Bir Veri Dışa Aktarma Modülü Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Dinamik bir dışa aktarma modülü oluşturmak için öncelikle projenizin güncel React (19+) sürümüyle yapılandırılmış olması gerekir. Veri işleme süreçlerinde performans kaybı yaşamamak adına, istemci tarafında veriyi manipüle edecek yardımcı kütüphaneler kullanacağız.

• Node.js 20+ sürümü.
• React 19 ve TypeScript desteği.
• Veri dönüşümü için xlsx (SheetJS) kütüphanesi.
• Dosya kaydetme işlemleri için file-saver paketi.

Projenize gerekli bağımlılıkları eklemek için terminalinizde şu komutu çalıştırabilirsiniz:

npm install xlsx file-saver

Bu paketler, ham JavaScript nesnelerini Excel formatına dönüştürmek ve oluşturulan dosyayı kullanıcının tarayıcısında tetiklemek için endüstri standardı araçlardır.

Veri Yapısını Hazırlama ve Formatlama

Dışa aktarma modülünün başarısı, verinin temizliğine ve doğru formatlanmasına bağlıdır. React bileşenlerinizde tuttuğunuz veriler genellikle JSON dizileri şeklindedir. Ancak, Excel'e aktarırken sütun başlıklarını ve veri tiplerini belirlemek gerekir.

Aşağıdaki örnekte, basit bir kullanıcı listesini nasıl yapılandıracağımızı görüyoruz:

const kullaniciVerileri = [
  { id: 1, ad: "Ahmet", soyad: "Yılmaz", email: "ahmet@example.com" },
  { id: 2, ad: "Ayşe", soyad: "Demir", email: "ayse@example.com" }
];

// Sütun başlıklarını Türkçeleştirme veya düzenleme
const formatlanmisVeri = kullaniciVerileri.map(k => ({
  "Kullanıcı ID": k.id,
  "Adı": k.ad,
  "Soyadı": k.soyad,
  "E-Posta Adresi": k.email
}));

Bu adım, verinin ham halini, kullanıcıya sunulacak "anlamlı" bir tablo yapısına dönüştürür. Veri tutarlılığını sağlamak için bu işlemi bir useMemo hook'u içerisinde yapmak, gereksiz yeniden render işlemlerini önleyecektir.

SheetJS ile Excel Dosyası Oluşturma

Verilerimizi hazırladıktan sonra, SheetJS kütüphanesini kullanarak bir çalışma kitabı (workbook) oluşturmamız gerekir. Bu işlem, veriyi binary (ikili) formata çevirerek tarayıcının dosyayı bir Excel dosyası olarak tanımasını sağlar.

import * as XLSX from 'xlsx';

const excelOlustur = (veri) => {
  const ws = XLSX.utils.json_to_sheet(veri);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Kullanıcılar");
  return wb;
};

Burada json_to_sheet fonksiyonu, JSON dizisini doğrudan bir Excel çalışma sayfasına dönüştürür. book_append_sheet ise bu sayfayı ana dosyamıza ekler.

Dosyayı İstemci Tarafında İndirme

Oluşturduğumuz çalışma kitabını kullanıcıya indirtmek için file-saver kütüphanesini kullanırız. Bu kütüphane, Blob (Binary Large Object) nesnelerini kullanarak tarayıcıda indirme işlemini tetikler.

import { saveAs } from 'file-saver';

const dosyayiKaydet = (wb, dosyaAdi) => {
  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  const data = new Blob([excelBuffer], { type: 'application/octet-stream' });
  saveAs(data, `${dosyaAdi}.xlsx`);
};

Bu kod bloğu, veriyi Excel'in anlayabileceği bir diziye (array) dönüştürür ve ardından tarayıcı üzerinden bir indirme penceresi açar.

Performans ve Bellek Yönetimi

Büyük veri setleri ile çalışırken, tüm veriyi aynı anda işlemek tarayıcıyı dondurabilir. Bu durumda "Web Workers" veya "Pagination" (sayfalama) yöntemlerini kullanmak önemlidir. Aşağıdaki tabloda, farklı veri boyutları için yöntem karşılaştırması yer almaktadır:

Kritik Uyarı: Kullanıcıdan gelen verileri dışa aktarırken, XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun. Dışa aktarılan verilerin içerisinde zararlı script kodları olmadığından emin olmak için veriyi her zaman sanitize (temizleme) işleminden geçirin.

Dinamik Dışa Aktarma Modülü Entegrasyonu

Tüm parçaları birleştirerek, React içerisinde tekrar kullanılabilir bir bileşen oluşturalım. Bu bileşen, kendisine gönderilen veriyi ve dosya adını kullanarak indirme işlemini gerçekleştirir.

const ExportButton = ({ data, fileName }) => {
  const handleExport = () => {
    const wb = excelOlustur(data);
    dosyayiKaydet(wb, fileName);
  };

  return (
    
      Excel Olarak İndir
    
  );
};

Bu modüler yapı, uygulamanızın farklı sayfalarında aynı dışa aktarma mantığını kullanmanıza olanak tanır. Bileşeninizi props ile özelleştirerek esnekliğini artırabilirsiniz.

Sıkça Sorulan Sorular

Dışa aktarılan Excel dosyasında karakter bozulmaları yaşıyorum, ne yapmalıyım?

Karakter kodlamasının UTF-8 olduğundan emin olun. SheetJS varsayılan olarak UTF-8 destekler, ancak dosya oluşturma aşamasında bookType değerinin doğru ayarlandığını kontrol edin.

Çok büyük verilerde tarayıcı neden çöküyor?

Tarayıcı, büyük miktarda veriyi bellekte tutmaya çalışırken limitlerini aşabilir. Bu durumda veriyi parçalar halinde (chunk) işlemeli veya dışa aktarma işlemini sunucu tarafına (backend) kaydırmalısınız.

CSV ve Excel arasında ne fark var?

CSV daha basit bir metin formatıdır ve sadece veri içerir. Excel (XLSX) ise hücre biçimlendirmesi, birden fazla sayfa ve formül desteği sunar. Basit raporlar için CSV, karmaşık tablolar için XLSX tercih edilmelidir.

İndirilen dosya ismini dinamik yapabilir miyim?

Evet, saveAs fonksiyonuna gönderdiğiniz ikinci parametreyi tarih veya kullanıcı girdisi ile birleştirerek dinamik dosya isimleri oluşturabilirsiniz.

Güvenlik açısından nelere dikkat etmeliyim?

Dışa aktarılan verinin sadece yetkili kullanıcılar tarafından erişilebilir olduğundan emin olun. Ayrıca, verinin kaynağının güvenilir olduğunu doğrulayın.

Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, verilerinizi mutlaka doğrulayın ve güvenlik testlerinden geçirin. Yanlış veri işleme süreçlerinden kaynaklanan veri kayıplarından yazar sorumlu tutulamaz.

İleri Seviye Özelleştirme: Sütun Filtreleme ve Veri Dönüştürme

Kullanıcıların dışa aktarılacak veriler üzerinde kontrol sahibi olmasını sağlamak, profesyonel bir veri yönetim modülünün olmazsa olmazıdır. Bazen API'den gelen ham veri, Excel'e aktarılmak istenen formattan farklı olabilir. Bu durumda, veriyi dışa aktarmadan önce bir "map" işleminden geçirmek en sağlıklı yöntemdir.

Aşağıdaki örnekte, kullanıcıya seçili sütunları filtreleme imkanı sunan ve veriyi formatlayan bir yapı görebilirsiniz:

const exportFilteredData = (data, selectedColumns) => {
  const filteredData = data.map(item => {
    const newItem = {};
    selectedColumns.forEach(col => {
      // Veri dönüşümü: Örneğin tarih formatını düzenleme
      if (col === 'createdAt') {
        newItem[col] = new Date(item[col]).toLocaleDateString('tr-TR');
      } else {
        newItem[col] = item[col];
      }
    });
    return newItem;
  });

  const worksheet = XLSX.utils.json_to_sheet(filteredData);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Rapor");
  XLSX.writeFile(workbook, "ozel_rapor.xlsx");
};

Alternatif Kütüphane: Neden 'ExcelJS' Tercih Edilmeli?

SheetJS (xlsx), hızlı ve basit işlemler için harika olsa da, Excel dosyalarına stil (renk, yazı tipi, kenarlık) eklemek istediğinizde kısıtlı kalabilir. Eğer dışa aktarılan raporlarınızın kurumsal bir görünüme sahip olması gerekiyorsa, ExcelJS kütüphanesine geçiş yapmanız önerilir.

ExcelJS ile Stil Uygulama Örneği

ExcelJS, hücre bazlı stil tanımlamanıza olanak tanır. Bu sayede başlık satırlarını kalınlaştırabilir veya hücrelere arka plan rengi atayabilirsiniz:

import ExcelJS from 'exceljs';

const generateStyledExcel = async (data) => {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Rapor');

  worksheet.columns = [
    { header: 'ID', key: 'id', width: 10 },
    { header: 'İsim', key: 'name', width: 30 }
  ];

  // Başlık stilini özelleştirme
  worksheet.getRow(1).font = { bold: true, color: { argb: 'FFFFFF' } };
  worksheet.getRow(1).fill = {
    type: 'pattern',
    pattern: 'solid',
    fgColor: { argb: '4F81BD' }
  };

  worksheet.addRows(data);

  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  // İndirme işlemini burada tetikleyebilirsiniz
};

Büyük Veri Setlerinde Web Worker Kullanımı

Binlerce satırlık veriyi tarayıcıda işlemek, ana iş parçacığını (main thread) kilitleyerek arayüzün donmasına neden olur. Bu durum, kullanıcı deneyimini doğrudan olumsuz etkiler. Veri işleme sürecini Web Worker kullanarak arka plana taşımak, uygulamanızın akıcılığını korur.

• Ana İş Parçacığı: Kullanıcı etkileşimlerini yönetir.
• Web Worker: Veriyi Excel formatına dönüştürme ve hesaplama işlemlerini yürütür.
• İletişim: postMessage metodu ile veriler ana uygulama ve worker arasında aktarılır.

Bu mimari, özellikle raporlama panellerinde "İndirme hazırlanıyor..." gibi bir yükleme durumu (loading state) göstermenize olanak tanır ve tarayıcının "Yanıt vermiyor" hatası vermesini engeller.

Sonuç

React ile dinamik bir veri dışa aktarma modülü oluşturmak, doğru kütüphaneler ve temiz bir mimari ile oldukça basit bir işlemdir. Bu rehberde, veriyi nasıl hazırlayacağınızı, Excel formatına nasıl dönüştüreceğinizi ve kullanıcıya nasıl sunacağınızı adım adım öğrendiniz. Bir sonraki adım olarak, bu modülün üzerine "CSV/Excel seçimi" veya "Sütun seçimi" gibi özellikler ekleyerek modülünüzü daha da geliştirebilirsiniz.