Saya memiliki link pada halaman web saya untuk mencetak halaman web. Namun, link ini juga terlihat pada hasil cetakan itu sendiri.
Ada javascript atau kode HTML yang akan menyembunyikan link tombol ketika saya klik link cetak?
Contoh:
"Good Evening"
Print (click Here To Print)
Aku ingin menyembunyikan ini "Print" label ketika mencetak teks "Selamat Malam". "Print" label tidak harus menunjukkan pada hasil cetakan itu sendiri.
Dalam stylesheet anda tambahkan:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Kemudian tambahkan class='tidak-cetak'
(atau menambahkan tidak-cetak kelas ke kelas yang sudah ada statement) dalam HTML anda bahwa anda don't ingin muncul dalam versi cetak, seperti tombol.
Praktek terbaik adalah untuk menggunakan style sheet khusus untuk pencetakan, dan dan yang media
atribut cetak
.
Dalam hal ini, menampilkan/menyembunyikan elemen yang anda inginkan untuk dicetak di atas kertas.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Bootstrap 3 memiliki versi sendiri kelas ini disebut:
hidden-print
Hal ini didefinisikan seperti ini:
@media print {
.hidden-print {
display: none !important;
}
}
Anda tidak perlu tentukan sendiri.
Di Bootstrap 4 hal ini telah berubah menjadi:
.d-print-none
Berikut ini adalah solusi sederhana masukan CSS ini
<style>
@media print{
.noprint{
display:none;
}
}
dan berikut ini 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>
FILE CSS
@media print
{
#pager,
form,
.no-print
{
display: none !important;
height: 0;
}
.no-print, .no-print *{
display: none !important;
height: 0;
}
}
HTML HEADER
<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 bisa menempatkan link dalam div, kemudian menggunakan JavaScript pada tag anchor untuk menyembunyikan div saat diklik. Contoh (belum teruji, mungkin perlu untuk men-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>
The downside adalah bahwa setelah diklik, tombol menghilang dan mereka kehilangan opsi pada halaman (ada's selalu Ctrl+P meskipun).
Solusi yang lebih baik akan membuat print stylesheet dan dalam stylesheet menentukan tersembunyi status printOption
ID (atau apa pun yang anda menyebutnya). Anda dapat melakukan ini di bagian head dari HTML dan menentukan kedua stylesheet dengan media atribut.
Jawaban yang diterima oleh diodus tidak bekerja untuk beberapa, jika tidak semua dari kita. Aku masih tidak bisa menyembunyikan saya Cetak tombol ini akan keluar pada kertas.
Sedikit penyesuaian oleh Clint Pachl memanggil file css dengan menambahkan pada
media="screen, print"
dan tidak hanya
media="screen"
ini memecahkan masalah ini. Jadi untuk kejelasan dan karena itu tidak mudah untuk melihat Clint Pachl tersembunyi bantuan tambahan di komentar. Pengguna harus memiliki ",cetak" di file css dengan yang diinginkan formating.
<link rel="stylesheet" href="my_cssfile.css" media="screen, print"type="text/css">
dan tidak default media = "layar" saja.
<link rel="stylesheet" href="my_cssfile.css" media="screen" type="text/css">
Aku berpikir memecahkan masalah ini untuk semua orang.
Jika anda memiliki Javascript yang mengganggu gaya properti dari elemen-elemen individual, dengan demikian utama !yang penting
, saya sarankan penanganan peristiwa onbeforeprint
dan onafterprint
. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint