Cara Membuat Tombol Print Seluruh/Sebagian Halaman Web

Sering kali sebuah web terutama web aplikasi memerlukan sebuah fungsi untuk mencetak/print halaman web baik keseluruhan maupun sebagian. Fungsi ini biasanya digunakan untuk mencetak laporan, mencetak screenshot halaman web dan sebagainya. Nah, di posting kali ini saya akan berbagi bagaimana caranya membuat sebuah tombol atau link untuk print halaman website.

Mencetak Keseluruhan Halaman Web

Secara default, setiap browser mempunyai fungsi untuk mencetak halaman web. Untuk Google Chrome misalnya dengan menekan CTRL + P atau dengan klik kanan -> ‘print’. Namun, jika anda seorang pembuat web tidak ingin menyusahkan pengguna mencetak halaman web dengan cara tersebut, ada baiknya menggunakan tombol untuk mencetak halaman tersebut. Caranya mudah, hanya memasukkan kode sebagai berikut pada halaman web :

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

Demo :

Cetak Halaman

Untuk Style desainnya, silahkan kustomisasi sendiri dengan menggunakan kode CSS.

Mencetak Sebagian Halaman Web

Cara 1

Pada browser manapun, setahu saya tidak ada fitur khusus untuk mencetak sebagian halaman web. Tapi, ada website yang menyediakan layanan untuk mencetak/print sebagian halaman web yang diinginkan, yaitu Www.printwhatyoulike.com.

Kunjungi websitenya, lalu masukkan url web yang ingin di print dan anda akan dialihkan ke halaman di mana anda dapat memilih bagian mana yang ingin dicetak.

Lalu klik tombol print yang ada di pojok kiri atas halaman, anda akan dialihkan ke panel pengaturan pencetakan default browser.

Untuk Membuat link tombolnya agar memudahkan pengunjung, cukup buat dengan kode dibawah ini :

<a href="http://www.printwhatyoulike.com/print?url=url_halaman_yang_akan_diprint">Cetak Halaman</a>

Cara 2

Jika anda tidak ingin menggunakan web printwhatyoulike.com, anda bisa mencetak sebagian halaman web dengan menggunakan javascript. Namun, dengan cara ini pengguna tidak bisa memilih halaman yang akan dicetak karena sudah ditentukan oleh anda. Cara ini berguna untuk halaman web berisi bagian tertentu yang harus di print, dan bagian lainnya tidak.

Caranya adalah dengan menambahkan kode javascript berikut ini sebelum tag html </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>

Lalu, buat tombol/link printnya dengan kode di bawah ini :

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

Dan, elemen web yang akan di printnya mempunyai atribut id=”id-elemen-yang-ingin-di-print” . misalnya :

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

Demo Link : http://jsfiddle.net/tovic/cSN9G/embedded/result,html,js,css/

Bagaimana ?  work? Jika ada pertanyaan, jangan sungkan tanyakan di komentar. Jangan lupa share ke fb atau twitter apabila merasa posting ini bermanfaat. Sekian, semoga bermanfaat 🙂

~Muhammad Syakirurohman~

referensi : http://www.dte.web.id/2013/03/printmencetak-sebagian-halaman-saja.html