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.
Daftar Isi Postingan
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.
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
dedi
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
Syakir Rahman
Itu pengaturannya ada di browser pas ditampilan mau ngeprint.. Kalo di chrome ada pilihan “Background Graphic”, lihat gambar ini http://prntscr.com/7mbgwd
tirta s
Sip mas , sngat mmbantu
Muhammad
.no-print{display:none}
itu untuk apa ya maksudnya?
Syakir Rahman
Itu untuk menentukan jika elemen yang tidak ingin diprint, maka tidak akan ditampilkan saat nge-print
martin
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
Syakir Rahman
Di atas sudah dijelaskan cari mencetak sebagian elemen.. silahkan baca lagi baik-baik.. trims
Helmiardi
mas, kalau merubah tampilannya bisa, soalnya punya saya tampilan saat di print dengan halaman yang ingin di print berbeda
Syakir Rahman
Bisa, pakai css media query untuk print.. lain kali saya bahas
syakirurahman
Tidak ada
irma
saya nyoba sintaknya kok tidak bisa??
Syakir Rahman
Salah implementasi kali
farah afifah
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
syakirurahman
style ulang aja cssnya pakai metode media query @media print { /* css khusus untuk tampilan saat di print */ }
Rizky
Gan, saya ingin mencetak halaman web dengan tabel berwarna, saya menggunakan css, tetapi pada saat di print preview kenapa ya warna nya hilang?
Rizky
Lalu saya mencoba lagi menggunakan javascript, ini coding nya:
Function warna(){
document.getElementById(“tr”).style.color=”rgba(68,200,245,1)”;
}
………..
Kalau memakai script ini hanya merubah warna text saja, bagaimana kalau merubah warna backgroud table headnya ya gan?
Terimakasih
Syakir Rahman
pake style.bgColor gan coba
Rizky
Tetep gk bisa gan..
Syakir Rahman
Biasanya itu di setting print browsernya.. coba lihat di optionnya biasanya ada pilihan buat menampilkan warna atau ngga
Rizky
Saya menggunakan mozila gan..
durotun
sya mencoba kok ngelink.nya di situs PrintWhatYoyLike mas??tolong kasih pencerahan
Syakir Rahman
Saya sudah jelaskan caranya di atas
Arumeta
Makasih gan infonya bermanfaat sekali
pengguna google
TY gan dah work