Gereksinimler ve Ön Hazırlık

Bu uygulamayı hayata geçirmek için herhangi bir harici kütüphane kurulumuna ihtiyacınız yoktur. Tarayıcıların yerleşik yazdırma motoru, günümüzde oldukça gelişmiş durumdadır. İhtiyacınız olan temel araçlar şunlardır:

• Modern bir tarayıcı (Chrome, Firefox, Edge veya Safari).
• Temel düzeyde HTML5 ve CSS3 bilgisi.
• JavaScript'in DOM (Document Object Model) manipülasyon yeteneklerine hakimiyet.
• Yazdırma sırasında sayfa düzenini kontrol etmek için CSS @media print kurallarının anlaşılması.

Adım 1: Yazdırma İçin Temel HTML Yapısını Oluşturma

Yazdırma önizlemesi yapmadan önce, sayfanın hangi kısmının yazdırılacağını belirlemek gerekir. Genellikle tüm sayfayı değil, sadece belirli bir içeriği (örneğin bir fatura kutusunu) yazdırmak istersiniz. Aşağıdaki örnek, yazdırma işlemini tetikleyecek basit bir yapı sunar.

    
Fatura Başlığı
    
Bu içerik yazdırılacak olan özel alandır.


Yazdır

Bu yapıda, yazdirilacak-alan kimliğine sahip div etiketi, yazdırmak istediğimiz ana içeriktir. Buton ise JavaScript fonksiyonunu tetiklemek için kullanılacaktır.

Adım 2: CSS ile Yazdırma Düzenini Ayarlama

Yazdırma önizlemesinin en önemli parçası, ekran çıktısı ile kağıt çıktısı arasındaki farkı yönetmektir. @media print sorgusu, yazıcıya gönderilen komutlarda geçerli olacak CSS kurallarını tanımlar.

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

Bu CSS bloğu, yazıcıya gönderilen sayfada sadece yazdirilacak-alan içerisindeki öğeleri görünür kılar ve yazdırma butonunu gizler. Böylece kullanıcı kağıt üzerinde gereksiz butonlar veya navigasyon menüleri görmez.

Adım 3: JavaScript ile Yazdırma İşlemini Tetikleme

JavaScript tarafında window.print() fonksiyonunu çağırmak, tarayıcının yazdırma önizleme penceresini açar. Aşağıdaki kod, butona tıklandığında süreci başlatır.

document.getElementById('yazdirma-butonu').addEventListener('click', function() {
    window.print();
});

Bu basit fonksiyon, tarayıcının yerel yazdırma önizleme penceresini tetikler. Tarayıcı, yukarıda tanımladığımız @media print kurallarını otomatik olarak algılayarak önizlemeyi buna göre oluşturur.

Adım 4: Dinamik İçerik ile Yazdırma Önizleme

Bazen yazdırma önizlemesinde, ekranda görünmeyen ancak kağıtta görünmesi gereken özel veriler (örneğin şirket logosu veya tarih) olabilir. Bunu JavaScript ile dinamik olarak yönetebiliriz.

function yazdirmaOncesiHazirlik() {
    const tarih = new Date().toLocaleDateString();
    const baslik = document.createElement('h2');
    baslik.innerText = "Tarih: " + tarih;
    document.getElementById('yazdirilacak-alan').prepend(baslik);
    
    window.print();
    
    // Yazdırma sonrası temizlik
    baslik.remove();
}

Bu örnekte, yazdırma işlemi başlamadan hemen önce sayfaya bir tarih başlığı eklenir ve yazdırma bittikten sonra bu öğe DOM'dan kaldırılır. Bu, kullanıcıya temiz bir belge sunmanızı sağlar.

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

Yazdırma önizlemesi yaparken kullanabileceğiniz yöntemlerin avantaj ve dezavantajlarını aşağıdaki tabloda inceleyebilirsiniz.

Adım 6: Hata Ayıklama ve Güvenlik Uyarıları

Yazdırma işlemlerinde en sık karşılaşılan hata, CSS kurallarının yanlış uygulanmasıdır. Tarayıcı geliştirici araçlarında "Rendering" sekmesini kullanarak "Emulate print media" seçeneğini işaretleyebilir ve kodunuzu tarayıcıyı kapatmadan test edebilirsiniz.

Kritik Güvenlik Uyarısı: Yazdırma işlemi sırasında kullanıcı verilerini işlerken XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun. Eğer yazdırılacak içerik kullanıcıdan geliyorsa, mutlaka veriyi temizleyin (sanitize) ve doğrudan HTML olarak enjekte etmeyin.

Sıkça Sorulan Sorular

Yazıcı ayarlarını JavaScript ile değiştirebilir miyim?

Hayır, tarayıcı güvenlik politikaları gereği JavaScript ile yazıcıyı doğrudan kontrol edemez veya varsayılan kağıt boyutunu değiştiremezsiniz. Bu ayarlar kullanıcı tarafından yapılmalıdır.

Yazdırma işlemi bittiğini nasıl anlarım?

Modern tarayıcılarda window.onafterprint olayını kullanarak yazdırma işlemi bittikten sonra tetiklenecek fonksiyonlar tanımlayabilirsiniz.

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

Evet, mobil tarayıcılar da window.print() metodunu destekler ancak cihazın işletim sistemine bağlı olarak yazdırma menüsü farklılık gösterebilir.

Sayfadaki tüm görselleri yazdırmada nasıl gizlerim?

@media print { img { display: none; } } kuralını CSS dosyanıza ekleyerek tüm görselleri yazdırma çıktısından kaldırabilirsiniz.

PDF olarak kaydetme ile yazdırma aynı mıdır?

Evet, tarayıcıların "PDF olarak kaydet" seçeneği, yazdırma motorunu kullanır. Dolayısıyla yazdırma için yaptığınız CSS düzenlemeleri PDF çıktısında da geçerli olur.

İleri Düzey Yazdırma Senaryoları ve Performans Optimizasyonu

Yazdırma işlemlerini optimize etmek, özellikle veri yoğunluklu raporlar veya dinamik içerikli fatura sistemleri için kritik öneme sahiptir. Tarayıcı tabanlı yazdırma süreçlerinde performans kaybını önlemek ve kullanıcı deneyimini iyileştirmek için aşağıdaki stratejileri uygulayabilirsiniz.

Büyük Veri Setlerinde Sayfa Kesme (Pagination) Kontrolü

Uzun listeler veya tablolar yazdırılırken, içeriğin sayfa sonuna denk gelmesi durumunda satırların bölünmesi okunabilirliği ciddi oranda düşürür. CSS break-inside özelliği ile bu sorunu kökten çözebilirsiniz.

.print-item {
  break-inside: avoid;
  page-break-inside: avoid;
}

.table-row {
  page-break-after: auto;
}

Bu kod bloğu, .print-item sınıfına sahip öğelerin sayfa geçişlerinde bölünmesini engeller. Özellikle fatura kalemleri veya form satırları için oldukça etkilidir.

Yazdırma Öncesi Veri Hazırlığı ve Performans

Kullanıcı "Yazdır" butonuna bastığında, DOM üzerinde çok fazla işlem yapmak tarayıcıyı dondurabilir. Bunun yerine, yazdırma için gerekli olan veriyi önceden hazırlayan bir "yazdırma kuyruğu" mantığı kullanın. Ayrıca, büyük görselleri yazdırma öncesinde düşük çözünürlüklü versiyonlarıyla değiştirmek, yazdırma işleminin başlamasını hızlandıracaktır.

function preparePrint() {
  const images = document.querySelectorAll('img.high-res');
  images.forEach(img => {
    img.src = img.dataset.printSrc; // Düşük çözünürlüklü versiyonu yükle
  });
  
  setTimeout(() => {
    window.print();
  }, 500);
}

Alternatif Yaklaşım: jsPDF ile İstemci Tarafında PDF Üretimi

Tarayıcının varsayılan yazdırma penceresi her zaman istenen görsel tutarlılığı sağlamayabilir. Eğer çıktınızın her tarayıcıda birebir aynı görünmesini istiyorsanız, jsPDF gibi kütüphanelerle doğrudan PDF dosyası oluşturmak daha güvenli bir yöntemdir.

jsPDF Kullanarak Basit Bir Rapor Oluşturma

Bu yöntem, tarayıcının yazdırma arayüzünü atlayarak doğrudan kullanıcının bilgisayarına bir PDF dosyası indirilmesini sağlar.

// jsPDF kütüphanesinin projeye dahil edildiğini varsayıyoruz
function generatePDF() {
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF();

  doc.text("Fatura Raporu", 10, 10);
  doc.text("Müşteri: Ahmet Yılmaz", 10, 20);
  
  // HTML içeriğini PDF'e dönüştürme
  doc.html(document.getElementById('content-to-print'), {
    callback: function (doc) {
      doc.save('rapor.pdf');
    },
    x: 10,
    y: 30
  });
}

Bu yaklaşım, özellikle kurumsal uygulamalarda, kullanıcının yazıcı ayarlarıyla uğraşmadan standart bir belge almasını sağlar. Ancak, büyük DOM ağaçlarında html() metodunun performans maliyetine dikkat etmeli ve karmaşık CSS yapılarını basitleştirmelisiniz.

Yazdırma Sürecinde İzlenmesi Gereken En İyi Uygulamalar

• Ölçekleme: Kullanıcıların yazıcı ayarlarından "sığdır" seçeneğini seçmesini beklemek yerine, CSS'de @page { size: auto; margin: 10mm; } kullanarak varsayılan boşlukları sabitleyin.
• Renk Yönetimi: Yazdırma işlemi genellikle siyah-beyaz ağırlıklıdır. @media print içerisinde -webkit-print-color-adjust: exact; kullanarak arka plan renklerinin ve grafiklerin düzgün aktarılmasını sağlayın.
• Erişilebilirlik: Yazdırılan belgelere mutlaka bir başlık () ve sayfa numaraları ekleyin. Sayfa numaraları için @bottom-right { content: counter(page); } kuralını kullanabilirsiniz.

Sonuç

JavaScript ile tarayıcı tabanlı bir yazdırma önizleme sistemi kurmak, projenize profesyonel bir dokunuş katar. @media print kurallarını kullanarak CSS üzerinde tam hakimiyet sağlamak ve window.print() metodunu doğru tetiklemek, kullanıcılarınızın temiz ve düzenli çıktılar almasını sağlar. Bir sonraki adım olarak, yazdırma öncesi verileri bir PDF dosyasına dönüştüren kütüphaneleri (örneğin jsPDF) inceleyerek yazdırma deneyiminizi bir üst seviyeye taşıyabilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanacağınız kodlarda, özellikle kullanıcı girdilerini işleyen kısımlarda, güvenlik açıklarına karşı gerekli tüm önlemleri almanız ve güvenlik testlerini yapmanız gerekmektedir.