Javascript Sayfanın Belirli Bir Alanını Yazdırma
Merhabalar, Javascript derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde Javascript ile sayfanın belirli bir yerini yazdırmayı anlatacağım. Hadi başlayalım !
Aslında Javascript ile sayfayı yazdırmayı şu yazımızda anlatmıştık fakat bu yöntemle sayfanın tamamını yazdırabiliyorken, bu yazımızda ekranın belirli bir yerini yazdırmayı anlatacağım. Sayfanın belirli bir alanını yazdırmak için 2 farklı yolumuz var. Birincisi tamamen Javascript kullanmak, diğerinde ise CSS’ten yardım almak olacak. Öncelikle CSS ile birlikte yapılabilen yöntemi anlatayım.
Bir web sitesinde yazdırma komutu çalıştırıldığında CSS tarafında print isimli media elementi ile takip yapılabilmekte. Bu print media’sı ile yazdırılmasını istemediğimiz alanları gizlersek, sayfada sadece yazdırılmasını istediğimiz alanlar kalacağı için doğrudan istediğimiz alanlar yazdırılacaktır. Ayrıca print media’sı yazdırma işlemi bittikten sonra deaktif olacağı için yazdırma işleminin ardından sayfamız tekrardan orijinal haline kendiliğinden gelecektir. Yazdırma öncesi ve sonrasındaki değişiklikler DOM üzerinde yapılmayıp arka planda yapıldığı için sayfa üzerinde herhangi bir değişiklik göze görünmeyecektir. Örneğin aşağıdaki gibi bir HTML sayfamızın olduğunu varsayalım.
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Örnek Sayfa</title>
</head>
<body>
<div id="alan1" class="yazdir">
<h2>Alan 1</h2>
<p>
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı
oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden
beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl
boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden
elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da
içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus
PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık
yazılımları ile popüler olmuştur.
</p>
</div>
<div id="alan2">
<h2>Alan 2</h2>
<p>
Yaygın inancın tersine, Lorem Ipsum rastgele sözcüklerden oluşmaz.
Kökleri M.Ö. 45 tarihinden bu yana klasik Latin edebiyatına kadar uzanan
2000 yıllık bir geçmişi vardır. Virginia'daki Hampden-Sydney College'dan
Latince profesörü Richard McClintock, bir Lorem Ipsum pasajında geçen ve
anlaşılması en güç sözcüklerden biri olan 'consectetur' sözcüğünün
klasik edebiyattaki örneklerini incelediğinde kesin bir kaynağa
ulaşmıştır. Lorm Ipsum, Çiçero tarafından M.Ö. 45 tarihinde kaleme
alınan "de Finibus Bonorum et Malorum" (İyi ve Kötünün Uç Sınırları)
eserinin 1.10.32 ve 1.10.33 sayılı bölümlerinden gelmektedir. Bu kitap,
ahlak kuramı üzerine bir tezdir ve Rönesans döneminde çok popüler
olmuştur. Lorem Ipsum pasajının ilk satırı olan "Lorem ipsum dolor sit
amet" 1.10.32 sayılı bölümdeki bir satırdan gelmektedir.
</p>
</div>
</body>
</html>
Örneğin bu sayfada yazdir isimli classın bulunduğu alanı yazdırmak istediğimizde; print media’sı ile ilgili alanın dışındaki herşeyi gizleyip sadece ilgili alanın görünür kalmasını sağlarsak, sadece istediğimiz alan yazdırılacaktır. Bunun içinde CSS’in visibility özelliğini kullanacağız. Bu özellik hidden değeri alırsa özelliğin verildiği alan gizlenir, visible verilirse görünür hale getirilmekte. Kısaca CSS kodlarımız şöyle olmalı;
@media print {
body * {
visibility: hidden;
}
.yazdir * {
visibility: visible;
}
}
Ayrıca yazdırmak istediğimiz tüm alanlara yazdir classı vererek onlarında yazdırılmasını sağlayabiliriz. CSS yardımı ile belirli bir alanı yazdırmayı anlattım, şimdide Javascript ile yazdırmayı anlatalım. Yazdırma işlemi yapıldığında Javascript tarafında herhangi bir değişiklik yada tetiklenme yapılmamakta, bu yüzden CSS gibi doğrudan müdahale yapamıyoruz. Bunun yerine yazdırılmasını istediğimiz alanı Javascript ile başka bir pencereye/sayfaya alıp o sayfada yazdırılmasını sağlayabiliriz. İşte bu Javascript’te yapılabilmekte 🙂
Javascript ile yeni bir pencere yani tarayıcı sekmesi açmak için window.open() fonksiyonu kullanılmakta ve açılan bu sekmeye müdahaleler yapılabilmekte. Yeni tarayıcı sekmesine müdahale yapmanın açık olan geçerli tarayıcı sekmesine müdahale etmekten tek farkı window.open() fonksiyonu ile açılan sayfayı bir değişkene atayıp, o değişken üzerinden manipülasyon yapmak. Geçerli sayfada manipülasyon yapabilmek için document nesnesi kullanılıyordu. Diğer herşey tamamen aynı.
Biz öncelikle yazdırılmasını istediğimiz alanı alacak, yeni bir sayfa açıp o sayfaya gönderecek ve o sayfayı yazdıracağız. Yazdırmanın ardından da o sayfayı kapatacağız. CSS ile yaptığımız örnekte kullandığımız HTML sayfasını burada da kullanalım.
var yazilacakAlan = document.getElementById('alan1');
var pencere = window.open();
pencere.document.body.innerHTML = yazilacakAlan.innerHTML;
pencere.print();
pencere.close();
Bu kodları bir HTML dosyasına yazıp tarayıcı üzerinden çalıştırdığınızda alan1 id değerli olan alanın yazdırıldığını göreceksiniz. Yazdığımız kodlar sayfa açılır açılmaz çalışacağından doğrudan sayfa açıldığı gibi yazdırılacaktır. Siz isterseniz bir buton koyup, butona tıklandığında yazdırma işlemini yaptırabilirsiniz.
Bu yazımızda bu kadardı, tüm Javascript yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.
