Mencetak sebuah halaman website memang cara yang paling mudah karena opsi tersebut sudah ada di dalam semua browser yang telah dirilis, namun kadang kala fungsi print tersebut agak sedikit tidak sesuai dengan harapan contohnya saja seperti mencetak bagian konten saja akan tetapi tetap saja seluruh elemen yang ada akan di print secara otomatis oleh browser lalu bagaimana agar elemen tertentu saja yang di print.

Kali ini saya akan akan sedikit sharring tentang cara membuat fungsi print yang hanya mencetak kontennya saja dalam artian jika kita ingin mencetak halaman website yang kita buat maka hanya kontennya saja bukan header ataupun footernya.

CSS Media Types

Untuk mewujudkan fungsi ini kalian akan membutuhkan css yang bernama CSS Media Types dimana CSS ini memiliki dua kegunaan yaitu :

  1. Mengaktifkan CSS tertentu berdasarkan resolusi layar atau luas daerah browser yang digunakan untuk membuat sebuah halaman website (untuk pembuatan tampilan responsive) dengan tag media screen
  2. Mengaktifkan CSS tertentu pada saat melakukan print pada sebuah halaman website.dengan tag media print

Karena kita akan menggunakan CSS Media Types untuk keperluan mencetak sebuah halaman maka kalian akan menggunakan code media print untuk membuat fungsi print menjadi lebih rapi dan tidak membuang banyak kertas.

Pemasangan

Dalam pemasangan sendiri saya membagi menjadi 2 cara yaitu dengan pemberian class pada div tertentu yang tidak ingin ditampilkan pada saat ingin dicetak dan menentukan class mana saja yang tidak ingin ditampilkan saat ingin dicetak. namun pada dasarnya caranya sama saja namun untuk masalah kerumitan itu tergantung dari kalian sendiri.

Pemberian class pada div tertentu yang tidak ingin ditampilkan pada saat ingin dicetak

Untuk menggunakan cara ini kalian membutuhkan sedikit CSS yang kurang lebih seperti ini :

@media print {
    .disablePrint {display:none;}
}

dengan cara ini kalian diharuskan untuk memberikan class pada seluruh div yang menurut kalian tidak ingin untuk ditampilkan saat melakukan proses mencetak, untuk contohnya kurang lebih seperti ini :

....

Kekurangan yang mungkin terlihat pada cara ini yaitu kalian harus kerja keras lagi untuk menyembunyikan beberapa element yang tidak ingin ditampilkan pada saat mencetak namun cara ini cocok untuk pemilik website yang hanya menyembunyikan bagian tertentu saja pada saat halamannya ingin diprint.

Menentukan class mana saja yang tidak ingin ditampilkan saat ingin dicetak

Berbeda dengan sebelumnya pada cara kedua ini kalian hanya cukup mengetahui class mana saja yang tidak ingin ditampilkan saat melakukan print jadi disini hanya membutuhkan code CSS saja yang kurang lebih seperti ini :

@media print {
    header, footer, .sidebar-left, .sidebar-right {
        display:none;
    }
}

Tidak ada kekurangan yang ada dalam menggunakan cara ini dan sah - sah saja jika digunakan oleh semua jenis website yang ada.

Bagaimana apakah kalian sudah menentukan pilihan ?