Javascript İle Tarayıcı Tabanlı Bir Sayfa İçi Yazdırma Modülü Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce modern bir tarayıcı (Chrome, Firefox veya Edge) ve temel bir HTML/CSS yapısına ihtiyacınız vardır. Herhangi bir dış kütüphane kullanmadan, tarayıcının sunduğu window.print() API'sini temel alacağız. 2026 yılı itibarıyla modern tarayıcılar, yazdırma işlemlerinde CSS'in @media print kurallarını tam desteklemektedir.

Gerekli Araçlar:

• Modern bir kod editörü (VS Code vb.)
• Temel HTML5 ve CSS3 bilgisi
• JavaScript ES6+ sözdizimi hakimiyeti

Adım 1: Temel Yazdırma Fonksiyonunu Oluşturma

En basit haliyle yazdırma işlemi, tarayıcının yazdırma diyalog penceresini tetikleyen window.print() komutu ile gerçekleşir. Ancak, tüm sayfayı yazdırmak yerine sadece belirli bir bölümü yazdırmak istediğimizde farklı bir strateji izlemeliyiz.

function yazdir() {
    window.print();
}

// Butona tıklandığında tetiklenmesi için:
// Yazdır

Bu kod, tarayıcının tüm sayfayı yazdırma moduna geçmesini sağlar. Eğer sayfanızda reklamlar veya yazdırmak istemediğiniz yan menüler varsa, bu yöntem tek başına yeterli olmayacaktır.

Adım 2: Yazdırılacak Alanı CSS ile İzole Etme

Sadece belirli bir içeriği yazdırmak için CSS'in @media print kuralını kullanırız. Bu kural, tarayıcı yazdırma moduna girdiğinde hangi öğelerin görünüp hangilerinin gizleneceğini belirler. Aşağıdaki kod, yazdırılacak alan dışındaki her şeyi gizler.

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

Burada #yazdirilacak-alan ID'sine sahip kapsayıcıyı görünür kılıp, diğer tüm body içeriğini gizliyoruz. Bu yöntem, sayfanın geri kalanını bozmadan temiz bir çıktı almanızı sağlar.

Adım 3: JavaScript ile Dinamik Yazdırma Modülü

Daha gelişmiş bir yöntem, yazdırılacak içeriği geçici bir iframe veya yeni bir pencere içerisine kopyalamaktır. Bu, sayfa tasarımınızdan bağımsız bir yazdırma şablonu oluşturmanıza olanak tanır.

function ozelYazdir(elementId) {
    const icerik = document.getElementById(elementId).innerHTML;
    const pencere = window.open('', '_blank', 'height=600,width=800');
    
    pencere.document.write('Yazdırma Modülü');
    pencere.document.write('');
    pencere.document.write('');
    pencere.document.write(icerik);
    pencere.document.write('');
    
    pencere.document.close();
    pencere.print();
}

Bu fonksiyon, belirtilen ID'deki içeriği alır, yeni bir pencere açar ve CSS dosyalarınızı bu pencereye enjekte ederek yazdırma işlemini başlatır. pencere.document.close() komutu, içeriğin tamamen yüklendiğini tarayıcıya bildirir.

Adım 4: Yazdırma İşlemi İçin Güvenlik ve Uyarılar

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

Kritik Güvenlik Uyarısı: Kullanıcı tarafından girilen verileri innerHTML içine yerleştirirken mutlaka HTML etiketlerini temizleyin (sanitizing). Aksi takdirde, kötü niyetli kullanıcılar yazdırma modülünüz üzerinden script enjeksiyonu yapabilir.

function guvenliYazdir(htmlIcerik) {
    const div = document.createElement('div');
    div.textContent = htmlIcerik; // Sadece metin olarak ekle
    // Veya DOMPurify gibi bir kütüphane kullanarak temizleme yapın
    return div.innerHTML;
}

Adım 5: Yazdırma Yöntemlerinin Karşılaştırılması

Aşağıdaki tablo, farklı yazdırma yaklaşımlarının avantaj ve dezavantajlarını özetlemektedir.

Adım 6: Kullanıcı Deneyimini İyileştirme (UX)

Kullanıcı yazdırma butonuna bastığında, işlemin başladığını belirten görsel bir geri bildirim vermek önemlidir. Ayrıca yazdırma bittikten sonra pencereyi otomatik kapatmak profesyonel bir dokunuştur.

function profesyonelYazdir(elementId) {
    const pencere = window.open('', '_blank');
    pencere.document.write(document.getElementById(elementId).innerHTML);
    pencere.document.close();
    
    // Yazdırma sonrası pencereyi kapat
    pencere.onafterprint = () => {
        pencere.close();
    };
    pencere.print();
}

Sorumluluk Reddi: Bu makaledeki kodlar eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce, yazdırma modülünüzün farklı tarayıcılardaki (Safari, Chrome, Firefox) davranışlarını mutlaka test edin.

Sıkça Sorulan Sorular

Yazdırılan sayfada CSS stillerim neden görünmüyor?

Yeni bir pencere açtığınızda, ana sayfanızdaki CSS dosyaları otomatik olarak aktarılmaz. pencere.document.write içerisinde etiketiyle CSS dosyanızı manuel olarak eklemeniz gerekir.

Kullanıcı yazdırma penceresini iptal ederse ne olur?

window.print() fonksiyonu, yazdırma işleminin başarılı olup olmadığını döndürmez. Ancak onafterprint olayı, yazdırma diyalog penceresi kapandığında tetiklenir.

Mobil cihazlarda yazdırma desteği var mı?

Modern mobil tarayıcılar, AirPrint (iOS) veya yerel yazdırma servisleri (Android) üzerinden yazdırmayı destekler. Ancak, mobil ekranlarda CSS düzenlemeleri (media queries) masaüstünden farklı olabilir.

Yazdırırken sayfa kenar boşluklarını nasıl ayarlarım?

CSS içerisinde @page { margin: 20mm; } kuralını kullanarak yazdırma çıktısının kenar boşluklarını belirleyebilirsiniz.

Belirli bir resmi yazdırmadan nasıl hariç tutarım?

CSS içerisinde .gizle-yazdir { display: none !important; } sınıfını tanımlayıp, yazdırmak istemediğiniz öğelere bu sınıfı ekleyerek kolayca gizleyebilirsiniz.

İleri Seviye İpuçları: Yazdırma Önizlemesini Simüle Etme

Tarayıcıların yazdırma önizleme ekranı, geliştirme sürecinde sürekli açıp kapatılması zahmetli bir arayüzdür. Geliştirme aşamasında CSS stillerini doğrudan tarayıcı üzerinde test etmek için Chrome Geliştirici Araçları'nı kullanarak yazdırma modunu simüle edebilirsiniz.

• F12 tuşuna basarak Geliştirici Araçları'nı açın.
• Ctrl + Shift + P (Mac için Cmd + Shift + P) tuşlarına basın.
• "Rendering" yazın ve "Show Rendering" seçeneğini seçin.
• Açılan panelde "Emulate CSS media type" kısmını bulun ve buradan "print" seçeneğini işaretleyin.

Bu yöntem sayesinde, yazdırma için hazırladığınız CSS kurallarının canlı olarak nasıl göründüğünü, yazdırma penceresini tetiklemeden anlık olarak gözlemleyebilirsiniz.

Yazdırma Sürecinde Performans ve Hata Ayıklama

Büyük veri tabloları veya karmaşık grafikler içeren sayfaları yazdırırken tarayıcı bellek yönetimi sorunları yaşanabilir. Özellikle window.print() fonksiyonunu çağırmadan önce DOM üzerinde yaptığınız manipülasyonların performansa etkisini göz önünde bulundurmalısınız.

Büyük Veri Setlerinde Bellek Yönetimi

Eğer yazdırma işlemi için sayfaya dinamik olarak çok sayıda öğe ekliyorsanız, yazdırma işlemi bittikten sonra bu öğeleri temizlemek tarayıcının bellek yükünü azaltacaktır. Aşağıdaki kod bloğu, yazdırma işlemi tamamlandıktan sonra geçici DOM öğelerini temizlemek için onafterprint olayını nasıl kullanacağınızı gösterir:

window.addEventListener('afterprint', () => {
    const tempContainer = document.getElementById('print-container');
    if (tempContainer) {
        tempContainer.remove();
        console.log("Yazdırma sonrası geçici DOM öğeleri temizlendi.");
    }
});

function tetikleYazdirma() {
    // Yazdırma öncesi hazırlık işlemleri
    window.print();
}

Hata Ayıklama Stratejileri

Yazdırma modülünüzde bir sorun oluştuğunda, genellikle tarayıcı konsolu hata vermez çünkü yazdırma penceresi ana sayfadan izole bir süreçte çalışır. Hata ayıklamak için şu adımları izleyin:

1. Stil Çakışmaları: !important kuralının aşırı kullanımı, yazdırma stillerinizin normal ekran stillerini bozmasına neden olabilir. Sadece @media print blokları içinde spesifik sınıflar kullanın.
2. Görsel Yükleme Sorunları: Eğer yazdırılan sayfada görseller eksik çıkıyorsa, görsellerin tam yüklendiğinden emin olun. window.print() fonksiyonunu window.onload veya tüm görsellerin yüklendiği bir Promise yapısından sonra tetikleyin.
3. Zaman Aşımı: Karmaşık raporlarda setTimeout kullanarak yazdırma penceresinin açılmasını 100-200ms geciktirmek, tarayıcının DOM'u tam olarak işlemesine olanak tanır.

Profesyonel İpucu: Yazdırma çıktısında sayfa numaraları veya tarih bilgisi gibi tarayıcıya özgü üst/alt bilgileri kaldırmak istiyorsanız, bunları CSS ile tamamen engellemek mümkün olmayabilir. Bu bilgiler tarayıcı ayarlarından kullanıcı tarafından yönetilir; bu nedenle tasarımınızı bu boşlukları hesaba katarak (margin değerlerini geniş tutarak) oluşturmanız en güvenli yoldur.

Sonuç

JavaScript ile tarayıcı tabanlı bir yazdırma modülü oluşturmak, uygulamanızın profesyonelliğini artıran temel bir yetenektir. Bu rehberde, CSS medya sorgularından yeni pencere yönetimine kadar yazdırma süreçlerini kontrol etmeyi öğrendiniz. Bir sonraki adım olarak, yazdırma modülünüze bir "PDF Olarak Kaydet" seçeneği eklemek için jsPDF gibi kütüphaneleri inceleyerek yeteneklerinizi genişletebilirsiniz.