Bagaimana cara menyembunyikan elemen saat mencetak halaman web?

Saya memiliki tautan di halaman web saya untuk mencetak halaman web tersebut. Namun, tautannya juga terlihat di cetakan itu sendiri.

Apakah ada kode javascript atau HTML yang akan menyembunyikan tombol tautan ketika saya mengklik tautan cetak?

Contoh:

 "Good Evening"
 Print (click Here To Print)

Saya ingin menyembunyikan label "Cetak" ini ketika mencetak teks "Selamat Malam". Label "Cetak" seharusnya tidak ditampilkan pada hasil cetak itu sendiri.

Di stylesheet Anda, tambahkan:

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

Kemudian tambahkan class='no-print'(atau tambahkan kelas tanpa cetak ke pernyataan kelas yang ada) di HTML Anda yang tidak ingin Anda tampilkan dalam versi cetak, seperti tombol Anda.

Bootstrap 3 memiliki nya sendiri kelas untuk ini disebut:

hidden-print

Didefinisikan seperti ini:

@media print {
  .hidden-print {
    display: none !important;
  }
}

Anda tidak harus mendefinisikannya sendiri.

Di Bootstrap 4 ini telah berubah menjadi:

.d-print-none

Praktik terbaik adalah menggunakan style sheet khusus untuk mencetak , dan mengatur mediaatributnya print.

Di dalamnya, perlihatkan / sembunyikan elemen yang ingin Anda cetak di atas kertas.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Berikut ini adalah solusi sederhana meletakkan CSS ini

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

dan di sini adalah HTML

<div class="noprint">
    element that need to be hidden when printing
</div>
<div class="noprint">
    element that need to be hidden when printing
</div>

CSS FILE

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HEADER HTML

<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

ELEMEN

<div class="no-print"></div>

Anda dapat menempatkan tautan di dalam div, kemudian menggunakan JavaScript pada tag jangkar untuk menyembunyikan div ketika diklik. Contoh (tidak diuji, mungkin perlu di-tweak tetapi Anda mendapatkan ide):

<div id="printOption">
    <a href="javascript:void();" 
       onclick="document.getElementById('printOption').style.visibility = 'hidden'; 
       document.print(); 
       return true;">
       Print
    </a>
</div>

Kelemahannya adalah setelah diklik, tombolnya menghilang dan mereka kehilangan opsi itu di halaman (selalu ada Ctrl + P).

Solusi yang lebih baik adalah membuat print stylesheet dan di dalam stylesheet tersebut tentukan status tersembunyi printOptionID (atau apa pun namanya). Anda dapat melakukan ini di bagian kepala HTML dan menentukan lembar gaya kedua dengan atribut media.

Hal terbaik untuk dilakukan adalah membuat versi halaman "hanya cetak".

Oh, tunggu ... ini bukan 1999 lagi. Gunakan cetak CSS dengan "display: none".

Jawaban yang diterima oleh diodus tidak berfungsi untuk sebagian orang jika tidak semua dari kita. Saya masih tidak bisa menyembunyikan tombol Print this saya untuk keluar ke kertas.

Penyesuaian kecil oleh Clint Pachl untuk memanggil file css dengan menambahkan

      media="screen, print" 

dan tidak adil

      media="screen"

sedang memecahkan masalah ini. Jadi untuk kejelasan dan karena tidak mudah melihat Clint Pachl menyembunyikan bantuan tambahan dalam komentar. Pengguna harus memasukkan ", cetak" dalam file css dengan format yang diinginkan.

     <link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">

dan bukan hanya media standar = "layar".

    <link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">

Saya pikir itu memecahkan masalah ini untuk semua orang.

Jika Anda memiliki Javascript yang mengganggu properti style dari elemen individual, maka dari itu !important, saya sarankan menangani event onbeforeprintdan onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint