Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve temel düzeyde DOM (Document Object Model) manipülasyon bilgisi yeterlidir. Herhangi bir dış kütüphane kullanmadan, saf (vanilla) Javascript ile ilerleyeceğiz.

• Modern bir kod editörü (VS Code önerilir).
• Tarayıcı geliştirici araçları (F12) ile hata ayıklama yetkinliği.
• CSS medya sorguları (media queries) hakkında temel bilgi.

Projemizin temel mantığı, yazdırılacak içeriği ayrı bir HTML yapısında veya geçici bir "iframe" (satır içi çerçeve) içerisinde işleyerek, ana sayfanın karmaşasından kurtarmaktır.

Adım 1: Yazdırılacak İçeriği Belirleme ve İzole Etme

Yazdırma önizlemesi yapmadan önce, sayfanın hangi kısmının yazdırılacağını belirlemek için bir "yazdırılabilir alan" tanımlamalıyız. Bu alan, CSS sınıfları ile diğer öğelerden ayrılmalıdır.

    
Fatura Detayları
    
Müşteri: Ahmet Yılmaz
    

Önizlemeyi Göster

Yukarıdaki kod bloğunda, yazdırılacak içeriği yazdirilacak-alan ID'sine sahip bir kapsayıcıya aldık. Bu, Javascript ile hedefleme yapmamızı kolaylaştıracaktır.

Adım 2: CSS ile Yazdırma Medya Sorgularını Yapılandırma

Yazdırma önizlemesinin en önemli parçası, ekran çıktısı ile kağıt çıktısı arasındaki farkı yönetmektir. @media print bloğu, sadece yazdırma işlemi sırasında uygulanacak stilleri belirler.

@media print {
    body * {
        visibility: hidden;
    }
    #yazdirilacak-alan, #yazdirilacak-alan * {
        visibility: visible;
    }
    #yazdirilacak-alan {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}

Bu CSS kodu, yazdırma komutu verildiğinde sayfadaki tüm öğeleri gizler ve sadece belirlediğimiz alanı görünür kılar. Bu, temiz bir yazdırma çıktısı için temel bir adımdır.

Adım 3: Javascript ile Dinamik Yazdırma Penceresi Oluşturma

Doğrudan window.print() fonksiyonunu çağırmak yerine, içeriği yeni bir pencere veya iframe içerisinde açmak, kullanıcıya gerçek bir önizleme deneyimi sunar. Aşağıdaki fonksiyon, içeriği kopyalayarak yeni bir pencerede açar.

function onizlemeAc() {
    const icerik = document.getElementById('yazdirilacak-alan').innerHTML;
    const pencere = window.open('', '_blank', 'width=800,height=600');
    
    pencere.document.write('Önizleme');
    pencere.document.write('');
    pencere.document.write('');
    pencere.document.write(icerik);
    pencere.document.write('');
    pencere.document.close();
}

Bu fonksiyon, seçilen içeriği yeni bir pencereye aktarır ve gerekli CSS dosyalarını bu pencereye dahil eder. pencere.document.close() komutu, tarayıcının yükleme işlemini tamamlamasını sağlar.

Adım 4: Yazdırma Modülünü Güvenli Hale Getirme

Kullanıcı verilerini işlerken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olmalısınız. Eğer yazdırılacak içerik kullanıcıdan gelen verileri içeriyorsa, bu verileri doğrudan innerHTML ile yazdırmadan önce temizlemelisiniz.

function guvenliIcerik(metin) {
    const div = document.createElement('div');
    div.textContent = metin;
    return div.innerHTML;
}

// Kullanım örneği:
// const temizVeri = guvenliIcerik(kullaniciGirdisi);
// pencere.document.write(temizVeri);

Güvenlik Uyarısı: Kullanıcı tarafından girilen veya dış kaynaklardan alınan verileri innerHTML içine doğrudan yerleştirmek, kötü niyetli scriptlerin çalıştırılmasına neden olabilir. Her zaman verileri metin olarak işleyin veya bir sanitizasyon kütüphanesi kullanın.

Adım 5: Modülü Kullanıcı Arayüzü ile Birleştirme

Artık tüm bileşenleri birleştirebiliriz. Kullanıcı butona tıkladığında önizleme fonksiyonu tetiklenecek ve yazdırma penceresi açılacaktır.

document.getElementById('onizleme-btn').addEventListener('click', function() {
    onizlemeAc();
    // Opsiyonel: Pencere yüklendikten sonra otomatik yazdırmayı tetikle
    setTimeout(() => {
        window.print();
    }, 500);
});

Bu yapı, kullanıcıya önce içeriği inceleme şansı verir, ardından yazdırma diyaloğunu otomatik olarak başlatır.

Yazdırma Yöntemlerinin Karşılaştırılması

Sıkça Sorulan Sorular

Yazdırdığım sayfada CSS stilleri neden görünmüyor?

Yeni açılan pencerede CSS dosyalarınızın yolu göreceli olabilir. Tam URL kullanmayı veya CSS içeriğini etiketi ile doğrudan pencereye enjekte etmeyi deneyin.

Pop-up engelleyiciler modülümü durdurur mu?

Evet, window.open() kullanımı bazı tarayıcılarda pop-up engelleyicilere takılabilir. Bu yüzden yazdırma işlemini bir kullanıcı etkileşimi (click event) içerisinde tetiklemek en güvenli yoldur.

Mobil cihazlarda yazdırma önizlemesi nasıl çalışır?

Mobil tarayıcılar genellikle yerel yazdırma arayüzlerini kullanır. window.print() fonksiyonu mobil cihazlarda doğrudan sistemin yazdırma ekranını açacaktır.

Yazdırırken arka plan renkleri çıkmıyor, ne yapmalıyım?

Tarayıcılar varsayılan olarak arka plan renklerini yazdırmaz. CSS içerisinde -webkit-print-color-adjust: exact; özelliğini kullanarak bunu zorlayabilirsiniz.

Büyük tabloları nasıl sayfaya sığdırabilirim?

CSS içerisinde table { table-layout: fixed; width: 100%; } kullanarak tabloların sayfa genişliğini aşmasını engelleyebilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kodlar eğitim amaçlıdır. Üretim ortamında (production) kullanırken, özellikle veri güvenliği ve tarayıcı uyumluluğu konularında kapsamlı testler yapmanız önerilir.

İleri Seviye Optimizasyon: Yazdırma Performansını Artırma

Yazdırma modülünüzü daha profesyonel hale getirmek için sadece temel işlevsellik yeterli değildir. Kullanıcı deneyimini iyileştirmek adına, yazdırma komutu tetiklendiğinde tarayıcının sayfayı render etme süresini optimize etmeniz gerekir. Özellikle büyük veri setleri veya karmaşık grafikler içeren sayfalarda, yazdırma penceresi açılmadan önce verilerin hazır olduğundan emin olmalısınız.

Performansı artırmak için şu stratejileri uygulayabilirsiniz:

• Görsel Yüklemelerini Erteleyin: Yazdırma penceresi açılmadan önce tüm görsellerin yüklendiğinden emin olun. Aksi takdirde, eksik görseller veya "kırık" ikonlar yazıcı çıktısında kötü bir görüntü oluşturur.
• DOM Manipülasyonunu Azaltın: Yazdırma için oluşturduğunuz geçici pencerede çok fazla DOM düğümü oluşturmak tarayıcıyı dondurabilir. Bunun yerine, mevcut içeriği klonlayıp gerekli CSS sınıflarını eklemek daha hızlı sonuç verir.
• Font Yükleme Kontrolü: Yazıcı çıktısında özel fontlarınızın düzgün görünmesi için document.fonts.ready API'sini kullanarak fontların tamamen yüklendiğini doğrulayın.

// Yazdırma öncesi font ve görsel kontrolü
async function preparePrint() {
    await document.fonts.ready;
    const images = Array.from(document.querySelectorAll('img'));
    await Promise.all(images.map(img => {
        if (img.complete) return Promise.resolve();
        return new Promise(resolve => { img.onload = resolve; img.onerror = resolve; });
    }));
    window.print();
}

Hata Ayıklama (Debugging) ve Tarayıcı Uyumluluk Testleri

Yazdırma modülleri, tarayıcıların güvenlik politikaları ve yazdırma motorlarındaki farklılıklar nedeniyle hata vermeye meyillidir. Geliştirme aşamasında şu yöntemleri kullanarak sorunları tespit edebilirsiniz:

1. Chrome DevTools Yazdırma Modu: Chrome Geliştirici Araçları'nda "Rendering" sekmesini açarak "Emulate CSS media type" seçeneğini "print" olarak ayarlayın. Bu, yazdırma penceresini açmadan CSS'inizin nasıl görüneceğini anlık görmenizi sağlar.
2. Konsol Loglarını İzleme: Yazdırma penceresi ayrı bir bağlamda (context) çalıştığı için, ana penceredeki konsol hataları bazen yazdırma penceresine yansımaz. Yazdırma penceresi içerisine bir try-catch bloğu ekleyerek hataları ana pencereye raporlayabilirsiniz.

İpucu: Yazdırma penceresi açıldığında, kullanıcıya "Yazdırma hazırlanıyor..." şeklinde bir yükleme göstergesi (spinner) sunmak, sistemin takılmadığını anlamalarını sağlar.

Sonuç

Javascript ile tarayıcı tabanlı bir yazdırma önizleme modülü oluşturmak, kullanıcılarınızın içeriklerinizi güvenle ve profesyonelce yazdırmasını sağlar. Bu rehberde, DOM manipülasyonu, CSS medya sorguları ve pencere yönetimi konularını ele alarak adım adım bir çözüm geliştirdik. Bir sonraki adım olarak, bu yapıyı daha karmaşık raporlar için PDF oluşturma kütüphaneleriyle (örneğin jsPDF) genişletmeyi düşünebilirsiniz. Kodlarınızı her zaman güncel tutun ve tarayıcıların yazdırma politikalarındaki değişiklikleri takip edin.