Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için herhangi bir sunucu tarafı dili veya karmaşık bir kütüphane gerekmemektedir. Sadece temel düzeyde Html5 ve Css3 bilgisi yeterlidir. Çalışmalarınızı test etmek için güncel bir web tarayıcısı (Chrome, Firefox veya Edge) ve bir kod editörü (VS Code gibi) kullanmanız önerilir.

• Html5: İçeriğin anlamsal (semantic) yapısını oluşturmak için.
• Css3 Media Queries: Yazdırma ekranına özel stiller tanımlamak için.
• Tarayıcı Geliştirici Araçları: Yazdırma önizlemesini simüle etmek için.

Temel Html Yapısının Oluşturulması

Yazdırma modülünün ilk adımı, yazdırılabilir içeriği kapsayıcı bir Html yapısı içine almaktır. Yazdırılmasını istemediğimiz butonlar, menüler veya reklam alanları ile yazdırılacak içeriği birbirinden ayırmamız gerekir.

    
Fatura Başlığı
    
Bu içerik yazdırılacaktır.


Sayfayı Yazdır

Yukarıdaki kodda, window.print() fonksiyonu tarayıcının yerel yazdırma penceresini tetiklemek için kullanılır. Bu en temel yöntemdir, ancak özelleştirme için yeterli değildir.

Css Media Queries ile Yazdırma Stilleri

Css'in @media print kuralı, sadece yazdırma işlemi sırasında uygulanacak stilleri tanımlamamıza olanak tanır. Bu sayede ekran görünümü ile kağıt çıktısı arasında tam bir ayrım yapabiliriz.

@media print {
    /* Yazdırma sırasında menüleri gizle */
    .nav-bar, .sidebar, button {
        display: none !important;
    }

    /* Yazdırma içeriğini tam genişlikte göster */
    #yazdirilacak-alan {
        width: 100%;
        margin: 0;
        padding: 20px;
    }
}

Bu blok, yazdırma komutu verildiği anda belirtilen öğeleri sayfadan kaldırır. !important kullanımı, diğer stillerin yazdırma görünümünü bozmasını engellemek için kritik bir güvenlik önlemidir.

Özelleştirilebilir Yazdırma Modülü İçin İleri Teknikler

Profesyonel bir modül, kullanıcıya yazdırma öncesinde bir önizleme veya içerik seçme imkanı sunmalıdır. Aşağıdaki Css kodları, çıktı üzerinde sayfa sonlarını ve kenar boşluklarını yönetmenizi sağlar.

@media print {
    body {
        font-size: 12pt;
    }
    .sayfa-sonu {
        page-break-after: always; /* Her sayfayı yeni bir kağıda başlatır */
    }
    @page {
        margin: 2cm; /* Kağıt kenar boşlukları */
    }
}

@page kuralı, tarayıcının yazdırma çıktısındaki kağıt boyutlarını ve boşluklarını doğrudan kontrol etmenizi sağlar. Bu, resmi belgeler veya faturalar için vazgeçilmez bir özelliktir.

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

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

Güvenli ve Temiz Bir Çıktı İçin İpuçları

Yazdırma modülünü geliştirirken dikkat etmeniz gereken en önemli husus, kullanıcının verisini korumaktır. Eğer yazdırma modülünüz dinamik veriler (kullanıcı ismi, kredi kartı bilgisi vb.) içeriyorsa, bu verilerin yazdırma sırasında XSS (Cross-Site Scripting) saldırılarına maruz kalmadığından emin olmalısınız.

Dikkat: Kullanıcı tarafından girilen verileri yazdırma çıktısına aktarırken, verileri her zaman sanitize edin. Doğrudan Html içeriğine veri gömmek, kötü niyetli scriptlerin çalıştırılmasına neden olabilir. Üretim ortamında içeriklerinizi her zaman güvenli bir şekilde işleyin.

Ayrıca, yazdırma sırasında sayfadaki renklerin (özellikle arka plan renklerinin) yazıcıdan çıkması için kullanıcının tarayıcı ayarlarında "Arka plan grafiklerini yazdır" seçeneğini seçmesi gerektiğini hatırlatan bir not eklemek, kullanıcı deneyimini artıracaktır.

Sıkça Sorulan Sorular

Yazdırma çıktısında neden bazı CSS stilleri görünmüyor?

Tarayıcılar varsayılan olarak arka plan renklerini ve görselleri yazdırmaz. Bunu aşmak için -webkit-print-color-adjust: exact; özelliğini kullanabilirsiniz.

Sayfa numaralarını yazdırma çıktısına nasıl eklerim?

Css ile sayfa numarası eklemek sınırlıdır. Genellikle @page kuralı ile altbilgi (footer) tanımlanabilir, ancak tam destek tarayıcıdan tarayıcıya değişir.

Yazdırma butonunu kağıt çıktısında nasıl tamamen yok ederim?

@media print { .yazdir-butonu { display: none; } } kuralı ile butonun çıktıda yer almasını kesin olarak engelleyebilirsiniz.

Mobil cihazlarda yazdırma modülü çalışır mı?

Evet, mobil tarayıcılar da window.print() fonksiyonunu destekler ve yazdırma önizlemesi sunar.

Yazdırma sırasında yazı tipi boyutu nasıl ayarlanır?

@media print bloğu içerisinde body { font-size: 12pt; } gibi bir tanımlama yaparak çıktıya özel font boyutları belirleyebilirsiniz.

Yazdırma Modülünde Performans ve Hata Ayıklama Stratejileri

Geliştirdiğiniz yazdırma modülünün büyük veri setleri veya karmaşık tablo yapıları içeren sayfalarda sorunsuz çalışması için performans optimizasyonu kritik bir rol oynar. Tarayıcılar, yazdırma önizlemesi oluştururken tüm DOM ağacını yeniden hesaplar. Bu durum, özellikle çok büyük içeriklerde tarayıcı donmalarına yol açabilir.

Performans İyileştirmeleri

Büyük raporları yazdırırken tarayıcının yükünü hafifletmek için şu yöntemleri uygulayabilirsiniz:

• Gereksiz Öğeleri DOM'dan Kaldırın: Yazdırma tetiklendiğinde, sadece yazdırılacak içeriği içeren bir iframe oluşturup veriyi buraya aktarmak, ana sayfanın performansını korur.
• Görsel Optimizasyonu: Yazdırma sırasında yüksek çözünürlüklü görsellerin yüklenmesi süreci yavaşlatır. @media print içerisinde görselleri display: none ile gizleyebilir veya düşük boyutlu versiyonlarını kullanabilirsiniz.
• CSS Containment: Karmaşık düzenlerde contain: layout; özelliğini kullanarak tarayıcının tüm sayfa düzenini yeniden hesaplamasını engelleyebilirsiniz.

Yazdırma Hatalarını Ayıklama

Yazdırma stillerini test ederken tarayıcının geliştirici araçlarını (DevTools) kullanmak en etkili yöntemdir. Chrome veya Firefox'ta şu adımları izleyerek yazdırma modunu simüle edebilirsiniz:

1. Geliştirici araçlarını açın (F12).
2. "More tools" menüsünden "Rendering" sekmesine tıklayın.
3. "Emulate CSS media type" seçeneğini bulun ve "print" olarak değiştirin.

Bu ayar sayesinde, yazdırma komutu vermeden doğrudan tarayıcı ekranında yazdırma stillerinin nasıl göründüğünü anlık olarak inceleyebilirsiniz.

Dinamik İçerik Yönetimi İçin JavaScript Entegrasyonu

Statik CSS kuralları bazen karmaşık iş mantıklarını yönetmekte yetersiz kalabilir. Yazdırma öncesinde veriyi manipüle etmek veya kullanıcıya özel bir yazdırma arayüzü sunmak için JavaScript'in beforeprint ve afterprint olaylarını kullanabilirsiniz.

window.addEventListener('beforeprint', () => {
    console.log('Yazdırma işlemi başlıyor, veriler hazırlanıyor...');
    document.getElementById('print-status').innerText = 'Rapor hazırlanıyor...';
});

window.addEventListener('afterprint', () => {
    console.log('Yazdırma işlemi tamamlandı.');
    document.getElementById('print-status').innerText = '';
});

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

Bu kod bloğu, kullanıcının yazdırma diyalog penceresini açtığı anda arayüzde bir durum mesajı göstermenize ve yazdırma bittiğinde bu mesajı temizlemenize olanak tanır. Özellikle kullanıcı deneyimini iyileştirmek ve yazdırma sırasında sayfa içeriğinin değişmesini engellemek için bu yaklaşım oldukça profesyonel bir yöntemdir.

İleri İpucu: Yazdırma Alanını Kısıtlama

Bazen sadece belirli bir div bloğunu yazdırmak isteyebilirsiniz. Bunun için tüm sayfayı yazdırmak yerine, hedef bloğu ayrı bir pencerede açıp yazdırma komutunu o pencereye göndermek en temiz yöntemdir:

function printSpecificElement(elementId) {
    const content = document.getElementById(elementId).innerHTML;
    const printWindow = window.open('', '_blank', 'width=800,height=600');
    
    printWindow.document.write('Yazdır');
    printWindow.document.write('');
    printWindow.document.write('');
    printWindow.document.write(content);
    printWindow.document.write('');
    
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
}

Bu yöntem, ana sayfanızdaki karmaşık CSS yapılarının yazdırma çıktısını bozmasını engeller ve tamamen izole edilmiş, temiz bir yazdırma ortamı sağlar.

Sonuç

Html & Css ile özelleştirilebilir bir içerik yazdırma modülü yapmak, doğru teknikleri bildiğinizde oldukça verimli bir süreçtir. @media print kuralını kullanarak, uygulamanızın ekran görünümünü bozmadan, kağıt üzerinde profesyonel ve düzenli çıktılar alabilirsiniz. Bu rehberde öğrendiğiniz yöntemleri, kendi projelerinizde fatura yazdırma, raporlama veya belge oluşturma süreçlerine kolayca entegre edebilirsiniz.

Bir sonraki adım olarak, JavaScript kullanarak yazdırma öncesi veriyi dinamik olarak değiştirmeyi veya yazdırma tamamlandığında kullanıcıya bir bildirim göstermeyi deneyebilirsiniz. Yazılım dünyasında sürekli güncel kalmak adına, tarayıcıların yazdırma API'ları üzerindeki yeni standartları takip etmenizi öneririm.