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.
|
1 2 3 |
window.print(); |
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.
|
1 2 3 4 5 6 7 8 |
<style> @media print { /*yazdır denildiğinde çalışacak kodlar*/ } </style> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> @media print { /*yazdır denildiğinde çalışacak kodlar*/ body * { visibility: hidden; } .yazdir * { visibility: visible; } } </style> |
Ş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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <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 Site </title> <style> @media print { /*yazdır denildiğinde çalışacak kodlar*/ body * { visibility: hidden; } .yazdir * { visibility: visible; } } </style> </head> <body> <h1>Siteme Hoşgeldiniz.</h1> <button id="btn1" onclick="window.print()">Bölüm 1 Yazdır</button> <div id="bolum1" class="yazdir"> <h2>Bölüm 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="bolum2"> <h2>Bölüm 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> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <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 Site </title> </head> <body> <h1>Siteme Hoşgeldiniz.</h1> <button id="btn1">Bölüm 1 Yazdır</button> <button id="btn2">Bölüm 2 Yazdır</button> <div id="bolum1" class="yazdir"> <h2>Bölüm 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="bolum2"> <h2>Bölüm 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> |
Nesneleri JavaScript tarafında almak için aşağıdaki kodları yazarak javascript kodlarına başlıyoruz.
|
1 2 3 4 |
const btn1=document.querySelector("#btn1"); const btn2=document.querySelector("#btn2"); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function yazdir(alanID) { //yazdırılacak nesneyi seçme let yazilacakAlan = document.querySelector(alanID); //yeni pencere aç, yazdırma alanını ekle //yazdır ve pencereyi kapat pencere=window.open(); pencere.document.body.innerHTML=yazilacakAlan.innerHTML; pencere.print(); pencere.close(); } |
|
1 2 3 4 5 6 7 8 9 10 11 |
//buton tıklama olayları btn1.onclick=function(){ yazdir("#bolum1"); } btn2.onclick=function(){ console.log(2) yazdir("#bolum2"); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <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 Site </title> </head> <body> <h1>Siteme Hoşgeldiniz.</h1> <button id="btn1">Bölüm 1 Yazdır</button> <button id="btn2">Bölüm 2 Yazdır</button> <div id="bolum1" class="yazdir"> <h2>Bölüm 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="bolum2"> <h2>Bölüm 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> <script> const btn1=document.querySelector("#btn1"); const btn2=document.querySelector("#btn2"); function yazdir(alanID) { //yazdırılacak nesneyi seçme let yazilacakAlan = document.querySelector(alanID); //yeni pencere aç, yazdırma alanını ekle //yazdır ve pencereyi kapat pencere=window.open(); pencere.document.body.innerHTML=yazilacakAlan.innerHTML; pencere.print(); pencere.close(); } //buton tıklama olayları btn1.onclick=function(){ yazdir("#bolum1"); } btn2.onclick=function(){ console.log(2) yazdir("#bolum2"); } </script> </body> </html> |
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.
“Uygulamada pencereye gönderirken CSS kodlarının da biçimlendirmek için gönderilmesi gerektiğini unutmamak gerekiyor.”
peki nasıl yapacağız bunu?