Cara sederhana memodifikasi tampilan print javascript 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 sekarang saya menulis topik seputar koding lagi. Pada kesempatan kali ini saya akan membahas sebuah cara sederhana memodifikasi tampilan print javascript bawaan browser dengan css.

Sedikit catatan, saya harap kamu punya skill CSS untuk mempraktikan cara ini, karna disini saya tidak akan membahas bagian CSS-nya melainkan hanya akan memberitahu jalannya saja.

Sintak javascript untuk membuat print seperti ini :

window.print()

Sintak ini hasilnya sama seperti kita menekan tombol CTRL + P di browser, dimana fungsi ini akan mencetak halaman web yang sedang kamu buka. Tapi tahukah kamu, fungsi ini bisa kita manfaatkan untuk mencetak sebuah laporan pada aplikasi yang di bangun berbasiskan web. Namun secara default hasilnya akan berantakan, karena fungsi ini akan mencetak semua yang tampil di halaman browser.

Tapi kamu jangan kwatir, kamu tetap bisa memanfaatkan fungsi ini secara optimal dan kamu juga bisa memodifikasi halamannya sesuai apa yang kamu mau, caranya dengan membuat design stylenya lewat CSS.

Berikut adalah 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, kamu hanya perlu menambahkan atribut media dengan value print agar kamu bisa mengatur stylenya. (media="print")

Sampai disini sudah terbayang sih harusnya, ya sampai disini kamu tinggal menuliskan style css yang kamu mau di salam sintak diatas.

Jika kamu ingin menghilangkan bagian yang tidak ingin kamu tampilkan pada halaman yang akan di print, kamu bisa menambahkan class pada tag yang mau dihilangkan, lalu pada bagian cssnya kamu bisa mengunakan properti display: none; untuk menghilangkannya. Selain itu kamu juga bisa menambahkan style yang lainnya sesuai keinginan kamu.

*NOTE : cara ini berfungsi di browser modern seperti opera browser, firefox dan chrome

Oke, saya harap kamu bisa memahami pemaparan singkat ini. Jika masih bingung bisa diskusi saja di kolom komentar. Materi ini saya cukupkan sampai disini, semoga bermanfaat yah, pamit dulu, terima kasih :)