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.
