Excel, PDF ve Resimden Filtrelenebilir Tabloya: Tarayıcıda Çalışan Bir Tablo Çevirici Nasıl Kurulur

Problem: tablo her yerde, ama hiçbiri kullanılabilir değil

Gün içinde tablo verisi sürekli elimize geçer ama nadiren işimize yarayacak halde gelir. Tedarikçi stok listesini PDF olarak yollar. Muhasebe ekranının fotoğrafını çeker, WhatsApp'tan atar. Bir web panelindeki tabloyu kopyalarsın, Excel'e yapıştırınca tek hücreye yığılır. Elinde "veri" vardır ama filtreleyemezsin, arayamazsın, süzemezsin.

Klasik çözüm: her seferinde elle Excel'e aktar, sütunlara böl, sonra filtre uygula. Beş dakikalık iş, günde on kez tekrarlanınca bir saate çıkar.

Ben bu döngüyü kıran küçük bir araç yaptım: Tablo Çevirici. Excel/CSV, PDF, resim ya da panodaki herhangi bir tabloyu alıp anında aranabilir, sıralanabilir ve Excel slicer mantığıyla tıklayarak filtrelenebilir bir tabloya çevirir. Hepsi tarayıcıda. Bu yazıda hem ne işe yaradığını hem de nasıl çalıştığını anlatıyorum.

Temel karar: her şey tarayıcıda

İlk ve en önemli mimari karar şuydu: hiçbir dosya sunucuya gitmesin. Çoğu "online PDF'den Excel'e" aracı dosyanı kendi sunucusuna yükler. İçinde fiyat listesi, müşteri verisi, cari hesap varsa bu bir sızıntıdır.

Modern tarayıcı bu işi tek başına yapabilecek kadar güçlü:

• Excel/CSV okuma: SheetJS (xlsx) tarayıcıda çalışır.
• PDF metin çıkarımı: pdf.js WebAssembly ile.
• OCR (resimden metin): tesseract.js, yine WebAssembly.

Üçü de istemci tarafında çalıştığı için dosya makineden hiç çıkmaz. Bonus: sunucu maliyeti sıfır, ölçeklenme derdi yok.

Dört giriş, tek hedef

Araç dört farklı kaynağı aynı veri modeline indirger: string[][] — yani satır-satır hücreler.

Kaynak	Yöntem	Güvenilirlik
Excel / CSV	SheetJS	Çok yüksek
HTML tablo (kopyala-yapıştır)	DOMParser ile <table> okuma	Yüksek
PDF (metin tabanlı)	pdf.js + koordinat kümeleme	Orta
Resim / ekran görüntüsü	Tesseract OCR + kümeleme	Değişken

En sağlamından en zorluna doğru gider. Şimdi ilginç olan ikisine bakalım.

CSV'de gizli tuzak: Türkçe karakterler

CSV okumak kolay görünür ama bir tuzağı var. SheetJS dosyayı ikili (binary) olarak okuduğunda kod sayfasını yanlış tahmin edebiliyor ve Ürün yerine Ã�rün çıkıyor. Çözüm, metin dosyalarını açıkça UTF-8 olarak çözmek:

const buf = await file.arrayBuffer();
const isText = /\.(csv|tsv|txt)$/.test(file.name.toLowerCase());

const wb = isText
  ? XLSX.read(new TextDecoder("utf-8").decode(buf), { type: "string" })
  : XLSX.read(buf, { type: "array" });

Küçük bir ayrım ama Türkçe veride fark her satırda görünür.

PDF'de sütunlar nerede biter?

PDF'in içinde "tablo" diye bir yapı yoktur. pdf.js sana sadece metin parçaları ve bunların sayfadaki (x, y) konumlarını verir. Tabloyu yeniden inşa etmek bize kalır.

Mantık iki adımlı:

1. Satırları bul: aynı y konumundaki (küçük bir toleransla) parçalar aynı satırdadır.
2. Sütunları bul: tüm satırlardaki x başlangıç konumlarını topla, birbirine yakın olanları tek bir "sütun çapasına" kümele. Sonra her hücreyi en yakın çapaya yerleştir.

// Yakın x değerlerini tek sütunda birleştir
for (const x of xs) {
  if (!anchors.length || x - anchors.at(-1) > tolerance) anchors.push(x);
  else anchors[anchors.length - 1] = (anchors.at(-1) + x) / 2;
}

Bu sezgisel bir yöntemdir; düzgün hizalanmış tablolarda iyi, iç içe geçmiş düzenlerde zayıf çalışır. Bu yüzden araç sonucun yanına "hizalamayı kontrol edin" notu düşer. Dürüstlük, sessizce yanlış veri üretmekten iyidir.

OCR'ın sürüm tuzağı

En zorlu kaynak resim. Tesseract.js metni çıkarır ama bir incelik var: yeni sürümlerde (v6/v7) recognize() varsayılan olarak kelime konumlarını döndürmez. Sütunları konuma göre ayırmak için bu kutular şart. Açıkça istemek gerekiyor:

const { data } = await worker.recognize(file, {}, { blocks: true });

Bunu kaçırırsanız OCR çalışır, metni bulur ama "tablo verisi bulunamadı" der — çünkü konum bilgisi boş gelir. Kelimeleri topladıktan sonra PDF'dekiyle aynı satır/sütun kümeleme uygulanır. Hiç konum gelmezse düz metni boşluğa göre bölen bir yedek mod devreye girer.

OCR'ın sınırını da söylemek lazım: net ekran görüntülerinde çok iyi, ama mesela S355J2+N ifadesindeki + işaretini bazen 4 okur. OCR sihir değil; çıktıyı her zaman göz gezdirmek gerek.

Asıl güzel kısım: Excel slicer mantığı

Veriyi tabloya çevirmek yarısı. Asıl değer filtreleme deneyiminde. Düz metin filtresi yerine Excel'in slicer (dilimleyici) mantığını web'e taşıdım.

Bir sütun için dilimleyici açtığında o sütunun benzersiz değerleri buton olarak çıkar, yanlarında kaç satırda geçtikleri yazar. Tıkladıkça filtrelersin:

• Aynı sütunda birden çok değer seçersen → "veya" (ikisini de göster).
• Farklı dilimleyiciler arası → "ve" (hepsini birden daralt).

Çapraz filtreleme: anlamsız seçenekleri söndür

Slicer'ı gerçekten Excel gibi yapan ayrıntı şu: bir değeri seçince diğer dilimleyicilerde artık eşleşmeyen değerler pasifleşir ve veri içerenler en üste çıkar. "Kalite = S355J2+N" seçtiğinde, kalınlık dilimleyicisinde sadece o kalitede stokta olan ölçüler aktif kalır.

İşin sırrı, her dilimleyicinin kullanılabilir değerlerini kendi seçimi hariç diğer tüm filtrelere göre hesaplamak. Kendi seçimini dışlamazsan aynı sütundan ikinci bir değer seçemezsin:

for (const other of slicerCols) {
  if (other === col) continue;            // kendi seçimini atla
  const sel = slicerSel[other];
  if (sel?.length && !sel.includes(row[other])) { ok = false; break; }
}

Üstüne, kategorik sütunlar (değerleri tekrar eden, benzersiz olmayan) için birkaç dilimleyici varsayılan açık gelir. Fiyat ya da ürün adı gibi her satırı farklı olan sütunlar dilimleyici olmaz — çünkü her değeri bir kez geçen bir filtre işe yaramaz.

Gerçek senaryolar

• Tedarikçi stok PDF'i: yükle, kaliteye ve kalınlığa göre slicer aç, aradığın ölçü stokta var mı saniyede gör.
• Panodaki web tablosu: ERP/mail ekranındaki hücreleri seç, kopyala, sayfada Ctrl+V. HTML yapısı korunduğu için sütunlar tam yerine oturur.
• Muhasebe ekranının fotoğrafı: çek, yapıştır, OCR çıkarsın; sayıları bir kez kontrol et, sonra filtrele.
• Dağınık CSV: Türkçe karakterler düzgün, ilk satırı başlık yapıp anında süz.

Her durumda sonucu filtrelenmiş haliyle CSV olarak indirebilirsin — yani aracı bir "temizleme katmanı" olarak da kullanabilirsin.

Sınırlar (çünkü dürüstlük önemli)

• PDF ve OCR çıkarımı sezgiseldir; karmaşık, iç içe tablolarda hizalama bozulabilir.
• OCR kalitesi görüntünün netliğine bağlıdır; el yazısı ya da eğri fotoğraf zorlar.
• Çok büyük dosyalarda OCR tarayıcıda birkaç saniye sürebilir (sunucuya yollamadığımız için işi CPU'n yapıyor).

Bunların hiçbiri "veri sızdırmamak" ilkesine değmez. Hız için gizlilikten vazgeçmektense, çıktıyı kontrol etmeyi tercih ediyorum.

Sonuç

Tablo verisini kullanılabilir hale getirmek küçük ama her gün tekrarlanan bir sürtünme. Tek bir araçta dört kaynağı birleştirip üstüne Excel slicer deneyimi koyunca, "veriyi Excel'e taşıyıp düzenleme" adımı tamamen ortadan kalkıyor.

Denemek için: Tablo Çevirici. Bir Excel sürükle, bir tablo fotoğrafı yapıştır, ya da web'den bir tabloyu kopyala — gerisini tarayıcın halleder.