JavaScript ile İstenilen Alanı Yazdırma – Tasarım Kodlama
JavaScript

JavaScript ile İstenilen Alanı Yazdırma

JavaScript yada yazdır butonu ile yazıcıdan çıktı aldığımızda sayfanın tüm alanını yazdırdığını görürüz. Sayfanın tamamını yazdırmak yerine belirli bir div alnını yazdırmak yada her hangi bir html etiketini yazdırmak isteyebiliriz. İşte bu yazıda iki farklı yöntemle belirli bir alanı nasıl yazdıracağınızı göreceksiniz. İlk örnekte javascript +CSS kullanılacak ikinci örnekte ise sadece javascript kullanılacak.

JavaScript Yazdır Komutu

Öncelikle en basit hali ile yazdır komutu nedir bir göz atalım.  İsterseniz javascript tüm sayfayı yazdır yazısından daha fazla bilgi edinebilirsiniz.

Yukarıdaki kodu her hangi bir butona eklediğinizde tüm sayfayı yazdıracaktır.

Yöntem 1: JavaScrit ve CSS ile belirli bir alanı yazdırma

Yazdırma ekranında çalışacak CSS kodları için print media’sı kullanılır. Aşağıdaki print media sorgusu yazdırma sırasında çalışacak kodları içerecektir.

Yazdırma sırasında tüm body etiketini gizlemek için visibility: hidden; ve istediğimiz nesneyi göstermek için visibility: visible; CSS kodlarını alt etiketleri dahil uyguluyoruz. Kodlarımız aşağıdaki gibi görünecektir.

Şimdi artık yazdır butonu ekleyebiliriz.  Sayfada yazdırmak istediğimiz alana .yazdir classını verdiğimizde yazdırma ekranında sadece o alan görünecektir.

Yöntem 2: JavaScript ile Sayfada İstenilen Alanı Yazdırma

Yukarıdaki yöntem tek bir alanı yazdırmak için ideal olarak kullanılabilir. Fakat birden fazla alanı ayrı ayrı yazdırmak için daha farklı yöntemler denemek gerekir. İşte bu aşamada biraz javascript kullanarak farklı alanları nasıl yazdıracağız ona bakacağız.

Aşağıdaki HTML kodunda #btn1, #btn2, #bolum1 ve #bolum2 nesneleri mevcut. btn1’e basıldığında bölüm 1 yazdırılacak, btn2,ye basıldığında ise bölüm 2 yazdırılacak. Önce HTML kodlarını oluşturma ile başlayalım.

Nesneleri JavaScript tarafında almak için aşağıdaki kodları yazarak javascript kodlarına başlıyoruz.

Ardından belirli alanı yazdırmak için gerekli olan yazdir() fonksiyonu ve kodlarını yazıyoruz. yazdir() fonksiyonu kendisine parametre olarak yazdırılacak alanı alacak.

  • yazdir() içinde önce yazdırılacak alanı seçiyoruz.
  • Ardından boş bir pencere açıp, pencereye yazdırılacak alanı ekliyoruz.
  • Pencereyi yazdırıyoruz.
  • Yazdırma bittikten sonra pencereyi kapatıyoruz.

Yazdırma işlemi için yazdir() fonksiyonunu yazdık. Şimdi sıra geldi, btn1 ve btn2 nesnelerine tıklandığında çalıştırılacak kodları yazmaya. btn1, ve btn2 nesnelerine tıklandığında yazdir() fonksiyonu çalışacak ve bölüm1 ve bölüm2 nesnelerinin ID değerleri veri olarak fonksiyona gönderilecek.

Adım adım anlattık uygulamanın çalışan bir örneği için tüm kodları aşağıda paylaşıyorum.

Yukarıdaki kodlar sayfadaki bölümleri yazdırmak için yapıldı. Uygulamada pencereye gönderirken CSS kodlarının da biçimlendirmek için gönderilmesi gerektiğini unutmamak gerekiyor.

 

Yorum bırak