Membuat tombol cetak seluruh halaman web dan sebagian halaman yang diinginkan dengan HTML & PHP

Sudah hampir sepekan ini saya belum sempat membuat postingan, karena satu minggu ini waktu saya tersita oleh job project yang saya kerjakan, oke pada pembahan kali ini saya akan membuat postingan yang ringan namun bermanfaat, ketika kita akan mencetak halaman web tentunya pada browser sudah di sediakan tombol print atau bisa langsung shortcut dengan menekan tombol CTRL + P maka halaman website anda akan tercetak, pertanyaannya bagaimanakan cara mencetak sebagian halaman yang diinginkan maupun seluruh halaman yang di inginkan dengan membuat tombol print dengan HTML & PHP, berikut penjelasan singkatnya :

• Mencetak Seluruh Halaman Web

Untuk mencetak seluruh halaman web kita cukup menggunakan fungsi "window.print()" untuk code lengkapnya seperti di bawah ini :

<a href="#" onclick="window.print()"> Print </a>

maka akan muncul tombol print seperti di bawah ini :

dan ketika di klik maka seluruh komponen halaman website akan tercetak semuanya.

• Mencetak Sebagian Halaman Web

Untuk Mencetak sebagian halaman website anda perlu menambahkan javascript di bagian paling bawah sebelum code tag </body> seperti berikut :

<script type="text/javascript">
     
     function printDiv(elementId) {
    var a = document.getElementById('print-area-2').value;
    var b = document.getElementById(elementId).innerHTML;
    window.frames["print_frame"].document.title = document.title;
    window.frames["print_frame"].document.body.innerHTML = '<style>' + a + '</style>' + b;
    window.frames["print_frame"].window.focus();
    window.frames["print_frame"].window.print();
}
</script>

kemudian sisipkan tag frame berikut pada bagian akhir dari bidang yang dipilih untuk di cetak :

<iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe>

tambahkan id pada area yang akan dipilih untuk di cetak pada tutorial ini menggunakan id="print-area-2" kemudian buat tombol cetak untuk sebagian halaman web seperti berikut :

<a class="no-print btn btn-sm btn-warning" href="javascript:printDiv('print-area-2');" ><span class="glyphicon glyphicon-print"></span> Print</a>
         

silahkan dicoba dan hasilnya sebagian halaman anda akan tercetak sesuai berdasarkan dengan id yang di buat, untuk contoh lengkap bisa anda lihat di sini http://jsfiddle.net/tovic/cSN9G/?utm_source=website&utm_medium=embed&utm_campaign=cSN9G. Semoga tutorial ini bisa bermanfaat dan berguna untuk anda yang membutuhkannya, Silahkan dicoba dan selamat belajar.

Happy Coding & Programming

Share :

Tweet

✚

Related Post