Cara Sederhana Memodifikasi Tampilan Print J4vascript Bawaan Browser Dengan Css
Lama sekali tidak membahas topik seputar koding, beberapa waktu belakangan ini seringnya ngebahas seputar OS, linux atau pun windows dan seputar instalasi. Baru kini aku menulis topik seputar koding lagi. Pada kesempatan kali ini aku akan membahas sebuah cara sederhana memodifikasi tampilan print j4vascript bawaan browser dengan css.
Sedikit catatan, aku harap kau punya skill CSS untuk mempraktikan cara ini, karna disini aku tidak akan membahas penggalan CSS-nya melainkan hanya akan memberitahu jalannya saja.
Sintak j4vascript untuk menciptakan print ibarat ini :
window.print()Sintak ini kesannya sama ibarat kita menekan tombol CTRL + P di browser, dimana fungsi ini akan mencetak halaman web yang sedang kau buka. Tapi tahukah kamu, fungsi ini dapat kita manfaatkan untuk mencetak sebuah laporan pada aplikasi yang di berdiri berbasiskan web. Namun secara default kesannya akan berantakan, sebab fungsi ini akan mencetak semua yang tampil di halaman browser.
Tapi kau jangan kwatir, kau tetap dapat memanfaatkan fungsi ini secara optimal dan kau juga dapat memodifikasi halamannya sesuai apa yang kau mau, caranya dengan menciptakan design stylenya lewat CSS.
Berikut ialah sintak dasar untuk menambahkan style pada halaman print :
<style type="text/css" media="print"> /* masukan sintak CSS disini */ </style> Tidak ada bedanya sebenarnya, cuma disini kuncinya, kau hanya perlu menambahkan atribut media dengan value print supaya kau dapat mengatur stylenya. (media="print")
Sampai disini sudah terbayang sih harusnya, ya hingga disini kau tinggal menuliskan style css yang kau mau di salam sintak diatas.
Jika kau ingin menghilangkan penggalan yang tidak ingin kau tampilkan pada halaman yang akan di print, kau dapat menambahkan class pada tag yang mau dihilangkan, kemudian pada penggalan cssnya kau dapat mengunakan properti display: none; untuk menghilangkannya. Selain itu kau juga dapat menambahkan style yang lainnya sesuai impian kamu.
*NOTE : cara ini berfungsi di browser modern ibarat opera browser, firefox dan chrome
Oke, aku harap kau dapat memahami pemaparan singkat ini. Jika masih gundah dapat diskusi saja di kolom komentar. Materi ini aku cukupkan hingga disini, semoga bermanfaat yah, pamit dulu, terima kasih :)
Sumber http://www.kang-cahya.com
0 Response to "Cara Sederhana Memodifikasi Tampilan Print J4vascript Bawaan Browser Dengan Css"
Posting Komentar