Membuat Tombol Print Seluruh dan Sebagian Halaman Website

Setelah beberapa waktu tidak posting tutorial web, kini saya kembali posting setelah kembali belajar lagi. Kali ini tutorial untuk menambah sedikit fitur pada website yang ingin Anda buat, sekedar memudahkan pengunjung nantinya ataupun malah memang diperlukan untuk pengunjung dan admin. Meski dengan klik kanan pada halaman website kemudian pilih print itu bisa, namun jika ada tombol print maka pengunjung yang belum terbiasa dengan website akan lebih mudah untuk keperluan cetak halaman website.
Langsung saja berikut tutorialnya.

Yang pertama, cara memberi tombol print untuk mencetak satu halaman full. Tinggal menambahkan javascript berikut ke bagian halaman web Anda.

<button onclick="window.print()">Cetak Halaman Web</button>

Print halaman website kadang tidak sesuai persis dengan tampilan halaman website sebenarnya.

Yang kedua, memberi tombol print untuk mencetak bagian halaman tertentu. Dalam hal ini kita yang membuat website tersebut lah yang menentukan mana bagian yang akan di print. Langkah pertama yaitu menambahkan javascript berikut sebelum tag </body>.

<textarea id="printing-css" style="display:none;">.no-print{display:none}</textarea>
<iframe id="printing-frame" name="print_frame" src="about:blank" style="display:none;"></iframe>
<script type="text/javascript">
function printDiv(elementId) {
 var a = document.getElementById('printing-css').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 buat tombolnya dengan script berikut.

<a href="javascript:printDiv('id-elemen-yang-ingin-di-print');">Print</a>

Untuk target bagian halaman yang ditentukan untuk di print, adalah yang berada diantara ID ini.

<div id="id-elemen-yang-ingin-di-print"> ..... </div>

Nah cukup sesimpel itu saja, Anda sudah bisa menambahkan fitur print di halaman website Anda. Silakan aja langsung dicoba. Cukup sekian tutorial membuat tombol print seluruh dan sebagian halaman website dari saya, ada kurangnya mohon dimaafkan :D . Selamat berkarya!

Jasa Desain Grafis Jogja, portfolio kunjungi https://www.instagram.com/alfaruqmedia/