Bagaimana cara menyembunyikan elemen saat mencetak halaman web?


440

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.

Jawaban:


743

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.


17
Jawaban ini tidak lengkap. Anda harus memiliki dua bagian media. @mediacetak dan @medialayar. Di bagian cetak, Anda menempatkan gaya Anda untuk dicetak. Di bagian layar layar, Anda menempatkan gaya Anda untuk sablon. Anda bahkan dapat memiliki beberapa bagian layar untuk resolusi yang berbeda. Pada dasarnya jika Anda hanya menambahkan apa yang diberikan dalam jawaban ini, itu tidak akan berhasil. Percayalah, saya sudah mencoba. Jadi bagaimana ini bisa mendapatkan upvotes 69?
Codeguy007

6
sebenarnya, itu berfungsi jika Anda hanya menggunakan kode yang memberi. Saya baru saja mencoba di firefox. jadi, setidaknya di browser modern ini solusinya.
luschn

8
Saya memang mencoba menyembunyikan <div> dengan beberapa sub-elemen di dalamnya. Masalahnya adalah beberapa elemen masih terlihat di cetak. Solusi adalah dengan menggunakan css ini:@media print { .no-print, .no-print * { display: none !important; } }
Philipp

6
Ini mungkin atau mungkin tidak berfungsi tergantung pada media yang ditentukan. Misalnya, untuk menggabungkan gaya layar dan gaya cetak dalam satu lembar gaya, kemudian gunakan kueri media di dalam lembar gaya tersebut, seperti yang disarankan jawaban ini, Anda harus menentukan tipe media "layar" dan "cetak":<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
Clint Pachl

5
@ Codeguy007: Saya tidak mengerti maksud Anda. Anda hanya perlu @media screenjika Anda ingin menentukan gaya layar saja tetapi ini tidak terjadi di sini: Secara default semua elemen ditampilkan, dan dengan mendefinisikan gaya cetak-saja yang menyembunyikan elemen tersebut cukup memadai untuk membuatnya tetap muncul di layar. .
chiccodoro

173

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

Solusi Bootstrap 4 yang luar biasa. Bekerja seperti pesona.
Diego Victor de Jesus

Saya tidak percaya bagaimana saya melewatkan solusi bootstrap sampai sekarang .. Terima kasih!
ReturnTable

! importantmenyelamatkan saya.
Evan Hu

168

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" />

9
Di sini Anda juga harus memiliki css untuk tidak menampilkan konten pembungkus lain, mengubah keluarga font ke nilai yang lebih baik, menghapus lebar untuk memungkinkan penggunaan halaman secara lengkap. Jika Anda mengatur stylesheet utama Anda ke media = "layar" Anda dapat memperlakukan stylesheet cetak Anda sebagai playgound baru.
Steve Perks

2
Benar. Dan dengan pendekatan ini, Anda bisa menghapus "Klik di sini untuk versi yang dapat dicetak" atau menambahkan "Halaman ini ramah printer" atau serupa. Praktik yang baik adalah, seperti yang dikatakan Steve Perks, hapus semua konten tidak sehat seperti navigasi, iklan, dan sejenisnya. Hanya sertakan konten utama halaman.
Arve Systad

39

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>

3
Kelas akan menjadi pilihan yang lebih baik daripada id di sini, karena alasan sederhana bahwa jika Anda menggunakan id maka Anda hanya dapat menerapkan aturan ini pada satu hal per halaman. Kelas akan memungkinkan Anda untuk menerapkannya di mana pun dibutuhkan.
Nick F

12

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>

10

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.


6

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

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


1
masih ada beberapa nilai dalam versi yang dapat dicetak karena jelas menampilkan kepada pengguna apa yang akan mereka dapatkan ketika mereka mencetak yang dapat disalahgunakan dengan teknik CSS
annakata

1
ditambahkan ke itu, Anda dapat memasukkan konten tambahan pada versi cetak seperti referensi tautan, footer, dll. Di masa mendatang, banyak dari ini akan dapat dicapai melalui css juga.
Steve Perks

8
@annakata: Pengguna sudah bisa menggunakan "Print Preview" di browser mereka. Sebagai bonus, sebenarnya itu untuk apa.
Rekursif


3

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.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.