Javascript İle Sayfa Yazdırma

Herkese merhabalar, Javascript derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde Javascript ile sayfayı yazdırma işlemini anlatacağım. Hadi başlayalım !

Javascript, çok efektif bir betik dili olduğu için geliştiricileri her ihtiyacımıza koşmuşlar ve herşey için bir fonksiyon hazırlamışlar sağolsunlar 🙂 İşte bu fedakar geliştiriciler, sayfanın yazıcı ile yazdırılması ihtiyacınıda gidermişler ve bunun için bir fonksiyon yazmışlar. Bu fonksiyonun adı ise print(). Bu fonksiyon herhangi bir parametre almıyor ve geriyede herhangi bir şey döndürmüyor. Ben yazdırır geçerim, gerisini yazıcı düşünsün diyor bi nevi 🙂

Örneğin kullanıcının bilgilerini girdiği bi formunuz var ve bu form ile kullanıcıdan kimlik numarası, doğum tarihi gibi resmî bilgiler istiyorsunuz. Haliyle kullanıcıda bir örneğini almak isteyebilir. İşte böylesi bir durumda kullanıcının girdiği formu yazdırmasını ve hem sizin hemde kullanıcının elinde bi yedek olmasını sağlayabilirsiniz.

print() fonksiyonu aslında doğrudan yazdırma işlemi yapmıyor, tarayıcıya yazdırma bildirimi gönderiliyor ve yazdırma işlemi tarayıcı tarafından yapılıyor. İnternet tarayıcınız, bilgisayara bağlı ve kullanılabilir bir yazıcı varsa yazdırma formunda bunu size gösteriyor ve yazdırma işlemi yapabiliyorsunuz. Bilgisayara bağlı bir yazıcı yok yada kullanılamıyor ise sayfanın tamamını PDF olarak kaydedilmesini sağlayabilirsiniz. Hem yazdırma hemde PDF olarak kaydetme işleminde sadece sayfadaki veriler görünür, yani internet tarayıcınız (Chrome, Firefox, Opera gibi) ile ilgili herhangi bir şey (örneğin adres barı) görünmez.

Örneğin bizde bi form yapalım ve formda bulunan butona tıklanınca formun bir çıktısını alalım. Öncelikle HTML tarafını bi yazalım.

<form>
  <label for="tc">TC Kimlik No</label>
  <input type="number" id="tc" />
  <br />
  <label for="dogum">Doğum Tarihi</label>
  <input type="date" id="dogum" />
  <br />
  <input type="submit" id="kaydet" value="Kaydet" />
</form>

Evet formumuzu tasarladık, şimdi sıra geldi butona tıklanınca formu yazdırmaya. Tabi kimlik numarasının girilmiş ve doğum tarihininde seçilmiş olup olmadığını kontrol edelim ve ikisinden herhangibiri boş ise hata verdirelim. Her ikiside dolu ise formu yazdıralım.

document.getElementById('kaydet').onclick = function () {
    const tc = document.getElementById('tc').value;
    const dogum = document.getElementById('dogum').value;
    if (!tc) alert('Kimlik Numarasını Yazmadınız!');
    else if (!dogum) alert('Doğum Tarihinizi Girmediniz!');
    else print();
}

Evet bu dersimizde buraya kadardı. Tüm Javascript derslerimize buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.