Javascript Dersleri

Javascript İle Belirlenen HTML Alanını Yazdırma

Bu dersimizde javascript ile belirlenen bir HTML etiketinin nasıl yazdırılacağından bahsedeceğim. Bildiğiniz gibi yazdırma işlemi print() ile gerçekleştirilmektedir. Bu fonksiyona belirli bir alanı belirtmeniz durumunda sadece o alan baz alınarak yazdırma işlemi yapılacaktır. Bu derste tablo üzerindeki verileri nasıl yazıcıya gönderileceğinden bahsedeceğim. Yazdırılacak alanın tablo olması gibi bir şartta bulunmamaktadır. İstediğiniz HTML etiketini yazdırabilirsiniz. Birden fazla alanı almak için en kapsayıcı HTML etkiketini seçmeniz yeterli olacaktır.

Öncelikle bir tablo ve buton oluşturalım. Sonrasında javascript kodlarını yazarak üzerinde inceleme yaparız.

<p>Bu yazı yazdırılmayacaktır!</p>
<h3>Bu yazı yazdırılmayacaktır!</h3>
<table border="1" id="tablo">
   <thead>
      <tr>
         <th>Kitap Adı</th>
         <th>Yazar Adı</th>
         <th>Sayfa Sayısı</th>
         <th>Kapak</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Her Yötünyle PHP</td>
         <td>ibrahim Çevrük</td>
         <td>808</td>
         <td><img src="https://www.ibrahimcevruk.com/wp-content/uploads/2019/11/her_yonuyle_php_kitabi_kapak3.jpg" alt=""></td>
      </tr>
      <tr>
         <td>Her Yötünyle PHP</td>
         <td>ibrahim Çevrük</td>
         <td>808</td>
         <td><img src="https://www.ibrahimcevruk.com/wp-content/uploads/2019/11/her_yonuyle_php_kitabi_kapak3.jpg" alt=""></td>
      </tr>
      <tr>
         <td>Her Yötünyle PHP</td>
         <td>ibrahim Çevrük</td>
         <td>808</td>
         <td><img src="https://www.ibrahimcevruk.com/wp-content/uploads/2019/11/her_yonuyle_php_kitabi_kapak3.jpg" alt=""></td>
      </tr>
   </tbody>
</table>

<button onclick="tablo()">Tabloyu Yazdır</button>

Yukarıda tablo ve buton yer almaktadır. Butonda onclick ile tıklama işlemi algılanarak işlem yapılmaktadır. Butona tıklatma ile tablo() fonksiyonu tetiklenecektir. Şimdi de tablo() fonksiyonunu yazarak sonuca ulaşalım.

<script>
function tablo(){
   var secim = document.getElementById('tablo');
   var pencere = window.open('', '', 'height=700,width=700');
   pencere.document.write(secim.outerHTML);
   pencere.document.close();
   pencere.print();
}
</script>

Yazdırma işleminin sadece belirlenen alanda sağlanması için yukarıdaki gibi getElementById() ile seçiyoruz. Sonrasında yeni bir pencerede bu alanı açıyoruz. Bu sayede yazılmasını istemediğimiz diğer alanlardan kurtulmuş oluyoruz. Sonrasında ise print() ile yazdırma işlemini tetikliyoruz.

Daha Fazla Göster

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Kapalı