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 halaman web

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 :

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.

print yang kamu suka

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.

pilih bagian yang akan di print

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

22 Comments

  1. kalo nge print image + text gimana gan ? saya nge print image yang ada text nya, yang ke print hanya text nya aja, background yang di belakangnya gak ikutan ke print

  2. Sip mas , sngat mmbantu

  3. .no-print{display:none}

    itu untuk apa ya maksudnya?

  4. gan kalo misalkan di web localhost saya cmn ada gambar ama tombol, trus kalau print gambarnya aja gmna gan?

    gambarnya ini terhubung ke database gan,
    terima kasih gan

  5. mas, kalau merubah tampilannya bisa, soalnya punya saya tampilan saat di print dengan halaman yang ingin di print berbeda

  6. saya nyoba sintaknya kok tidak bisa??

  7. Mas , saya sudah coba mengguankan window.print . nah ternyata di setiap halaman berbeda ukuran nya .
    misal di halaman 1 saya menggunakan margin top : 5 px . tetapi di halaman kedua , margin top tersebut tidak berfungsi . kenapa ya ?
    padahal saya ingin di setiap halaman , sama hal nya dengan halaman pertama

  8. Gan, saya ingin mencetak halaman web dengan tabel berwarna, saya menggunakan css, tetapi pada saat di print preview kenapa ya warna nya hilang?

  9. sya mencoba kok ngelink.nya di situs PrintWhatYoyLike mas??tolong kasih pencerahan

  10. Makasih gan infonya bermanfaat sekali

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *