Jak ukryć element podczas drukowania strony internetowej?

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.

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.

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

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

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>

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>

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.

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”.

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.

Jeśli masz Javascript, który koliduje z właściwością stylu poszczególnych elementów, w ten sposób przesłaniając !important, sugeruję obsługę zdarzeń onbeforeprinti onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint