Jak ukryć element podczas drukowania strony internetowej?

440

Mam link na mojej stronie, aby wydrukować stronę. Link jest jednak widoczny również w samym wydruku.

Czy istnieje kod JavaScript lub kod HTML, który ukryłby przycisk łącza po kliknięciu łącza drukowania?

Przykład:

 "Good Evening"
 Print (click Here To Print)

Chcę ukryć tę etykietę „Drukuj”, gdy drukuje tekst „Dobry wieczór”. Etykieta „Drukuj” nie powinna pojawiać się na samym wydruku.

sourav
źródło

Odpowiedzi:

743

W swoim arkuszu stylów dodaj:

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

Następnie dodaj class='no-print'(lub dodaj klasę bez wydruku do istniejącej instrukcji klasy) w swoim HTML, aby nie pojawiała się w wersji drukowanej, na przykład przycisku.

Diodeus - James MacFarlane
źródło
17
Ta odpowiedź nie jest kompletna. Musisz mieć dwie sekcje mediów. @mediawydruk i @mediaekran. W sekcji drukowania umieścisz swoje style do drukowania. W sekcji ekranu umieścisz swoje style do sitodruku. Możesz nawet mieć wiele sekcji ekranu dla różnych rozdzielczości. Zasadniczo, jeśli dodasz tylko to, co podano w tej odpowiedzi, nie zadziała. Uwierz mi, że próbowałem. W jaki sposób uzyskało 69 głosów pozytywnych?
Codeguy007
6
w rzeczywistości działa, jeśli użyjesz tylko podanego kodu. Właśnie próbowałem w Firefox. więc przynajmniej w nowoczesnych przeglądarkach jest to rozwiązanie.
luschn
8
Próbowałem ukryć <div> z kilkoma podelementami w środku. Problem polegał na tym, że niektóre elementy były nadal widoczne na wydruku. Rozwiązaniem było użycie tego css:@media print { .no-print, .no-print * { display: none !important; } }
Philipp
6
To może, ale nie musi działać, w zależności od określonych mediów. Na przykład, aby połączyć style ekranu i drukowania w jednym arkuszu stylów, a następnie użyj zapytań o media w tym arkuszu stylów, jak sugeruje ta odpowiedź, musisz określić typy nośników „screen” i „print”:<link rel="stylesheet" href="all.css" media="screen, print" type="text/css">
Clint Pachl
5
@ Codeguy007: Nie rozumiem, o co ci chodzi. Potrzebujesz tylko, @media screenjeśli chcesz zdefiniować style tylko na ekranie, ale tak nie jest w tym przypadku: Domyślnie wyświetlane są wszystkie elementy, a zdefiniowanie stylu tylko do wydruku, który ukrywa element, jest całkowicie wystarczające, aby nadal pojawiał się na ekranie .
chiccodoro
173

Bootstrap 3 ma swoją własną klasę na ten nazywa się:

hidden-print

Jest on zdefiniowany w następujący sposób:

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

Nie musisz go definiować samodzielnie.


W Bootstrap 4 zmieniło się to na:

.d-print-none
Bijan
źródło
Świetne rozwiązanie Bootstrap 4. Działa jak marzenie.
Diego Victor de Jesus,
Nie mogę uwierzyć, jak do tej pory brakowało mi rozwiązania bootstrap. Dziękuję!
ReturnTable
! importanturatował mnie
Evan Hu
168

Najlepszą praktyką jest użycie arkusza stylów specjalnie do drukowania i ustawienie jego mediaatrybutu na print.

W nim pokaż / ukryj elementy, które chcesz wydrukować na papierze.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Andreas Grech
źródło
9
W tym miejscu powinieneś także mieć css, aby nie wyświetlał innej zawartości opakowania, zmień rodzinę czcionek na lepszą, usuń szerokości, aby umożliwić pełne wykorzystanie strony. Jeśli ustawisz główny arkusz stylów na media = "screen", możesz potraktować swój arkusz stylów drukowania jako nowy sposób odtwarzania.
Steve Perks,
2
Absolutnie. Dzięki takiemu podejściu możesz po prostu usunąć „Kliknij tutaj, aby uzyskać wersję do wydruku” lub dodać „Ta strona nadaje się do drukowania” lub podobnym. Dobrą praktyką jest, jak powiedział Steve Perks, usuwanie wszelkich niepotrzebnych treści, takich jak nawigacja, reklamy i tym podobne. Uwzględnij tylko podstawową treść strony.
Arve Systad
39

Oto proste rozwiązanie umieść ten CSS

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

a tu jest 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>
Nesar Nori
źródło
3
Klasa byłaby lepszym wyborem niż identyfikator z tego prostego powodu, że jeśli użyjesz identyfikatora, możesz zastosować tę regułę tylko do jednej rzeczy na stronie. Klasa pozwoli ci zastosować ją tam, gdzie jest potrzebna.
Nick F
12

PLIK CSS

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

ELEMENT

<div class="no-print"></div>
użytkownik3806549
źródło
10

Możesz umieścić link w div, a następnie użyć JavaScript na tagu kotwicy, aby ukryć div po kliknięciu. Przykład (nie przetestowany, może wymagać modyfikacji, ale pojawia się pomysł):

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

Minusem jest to, że po kliknięciu przycisk znika i tracą tę opcję na stronie (zawsze jest jednak Ctrl + P).

Lepszym rozwiązaniem byłoby utworzenie arkusza stylów drukowania i w tym arkuszu stylów określić ukryty status printOptionidentyfikatora (lub jakkolwiek go nazwiesz). Możesz to zrobić w sekcji nagłówka HTML i określić drugi arkusz stylów z atrybutem media.

Justin Scott
źródło
6

Najlepszą rzeczą do zrobienia jest stworzenie wersji strony „tylko do wydruku”.

Och, czekaj ... to już nie jest 1999. Użyj wydruku CSS z „display: none”.

Jay R.
źródło
1
wciąż jest pewna wartość w wersjach do wydruku, ponieważ wyraźnie pokazuje użytkownikowi, co otrzymają, gdy drukują, co może być nadużywane za pomocą technik CSS
annakata
1
dodając do tego, możesz dołączyć dodatkowe wersje do wersji drukowanej, takie jak odnośniki do linków, stopki itp. W najbliższych dniach wiele z nich będzie można osiągnąć również poprzez css.
Steve Perks,
8
@annakata: Użytkownik może już to uzyskać za pomocą „Podglądu wydruku” w swojej przeglądarce. Jako bonus, właśnie po to jest.
rekursywny
5

@media print {
  .no-print {
    visibility: hidden;
  }
}
<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>

Mike Rapadas
źródło
3

Przyjęta przez diodus odpowiedź nie działa dla niektórych, jeśli nie dla nas wszystkich. Nadal nie mogłem ukryć przycisku Drukuj ten przycisk przed wyjściem na papier.

Niewielkie dostosowanie przez Clint Pachl wywołania pliku css przez dodanie

      media="screen, print" 

i nie tylko

      media="screen"

rozwiązuje ten problem. Więc dla jasności i ponieważ nie jest łatwo zobaczyć Clint Pachl ukrytą dodatkową pomoc w komentarzach. Użytkownik powinien dołączyć plik „, print” do pliku css z żądanym formatowaniem.

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

a nie domyślny media = „tylko ekran”.

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

Myślę, że to rozwiązuje ten problem dla wszystkich.

sieci
źródło