Cum pot ascunde un element la imprimarea unei pagini web? (Programare, Css, Imprimare)

Am un link pe pagina mea web pentru a imprima pagina web. Cu toate acestea, linkul este vizibil și în tipărirea propriu-zisă.

Există un cod javascript sau HTML care să ascundă butonul de legătură atunci când fac clic pe link-ul de imprimare?

Exemplu:

 "Good Evening"
 Print (click Here To Print)

Vreau să ascund această etichetă „Print” atunci când se tipărește textul „Bună seara”. Eticheta „Print” nu ar trebui să se afișeze pe tipărirea propriu-zisă.

10 răspunsuri

În foaia de stil adăugați:

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

Apoi adăugați class='no-print' (sau adăugați clasa no-print la o declarație de clasă existentă) în HTML-ul dvs. care nu doriți să apară în versiunea tipărită, cum ar fi butonul dvs.

Comentarii

    21

  • Acest răspuns nu este complet. Trebuie să aveți două secțiuni media. @media print și @media ecran. În secțiunea de imprimare, plasați stilurile pentru imprimare. În secțiunea de ecran, plasați stilurile pentru serigrafie. Puteți avea chiar mai multe secțiuni de ecran pentru diferite rezoluții. Practic, dacă adăugați doar ceea ce este dat în acest răspuns, nu va funcționa. Credeți-mă că am încercat. Deci, cum a ajuns acest lucru la 69 upvotes? –  > Por Codeguy007.
  • de fapt, funcționează dacă folosești doar codul care este dat. tocmai am încercat în Firefox. deci, cel puțin în browserele moderne aceasta este soluția. –  > Por luschn.
  • Am încercat să ascund un <div> cu mai multe subelemente înăuntru. Problema a fost că unele elemente erau încă vizibile la imprimare. Soluția a fost să folosesc acest css: @media print { .no-print, .no-print * { display: none !important; } } –  > Por Philipp.
  • Acest lucru poate funcționa sau nu în funcție de media specificată. De exemplu, pentru a combina stilurile pentru ecran și pentru imprimare într-o foaie de stil, apoi pentru a utiliza interogări media în cadrul acelei foi de stil, așa cum sugerează acest răspuns, trebuie să specificați atât tipul de media „ecran”, cât și „imprimare”: <link rel="stylesheet" href="all.css" media="screen, print" type="text/css"> –  > Por Clint Pachl.
  • @Codeguy007: Nu vă înțeleg punctul de vedere. Aveți nevoie doar de @media screen dacă doriți să definiți stiluri numai pentru ecran, dar nu este cazul aici: În mod implicit, toate elementele sunt afișate, iar prin definirea unui stil de tip „doar pentru imprimare” care ascunde elementul este perfect suficient pentru ca acesta să apară în continuare pe ecran. –  > Por chiccodoro.

Bootstrap 3 are site-ul său propriul clasă pentru acest lucru numită:

hidden-print

Aceasta este definită astfel:

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

Nu trebuie să o definiți singur.


În Bootstrap 4 acest lucru s-a schimbat în:

.d-print-none

Comentarii

  • O soluție excelentă pentru Bootstrap 4. Funcționează ca un farmec. –  > Por Diego Victor de Jesus.
  • Nu pot să cred cum am ratat soluția bootstrap până acum… Vă mulțumesc! –  > Por ReturnTable.
  • ! important m-a salvat. –  > Por Evan Hu.

Cea mai bună practică este să utilizați o foaie de stil special pentru imprimare, și să setați media la print.

În ea, afișați/ascundeți elementele pe care doriți să fie tipărite pe hârtie.

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

Comentarii

  • Aici ar trebui să aveți, de asemenea, css pentru a nu afișa alt conținut de înveliș, schimbați font-family la o valoare mai bună, eliminați lățimile pentru a permite utilizarea completă a paginii. Dacă vă setați foaia de stil principală la media=”screen”, puteți trata foaia de stil pentru imprimare ca pe un nou playgound. –  > Por Steve Perks.
  • Absolut. Și cu această abordare, puteți fie să eliminați „Click aici pentru versiunea imprimabilă”, fie să adăugați „Această pagină este adaptată pentru imprimantă” sau similar. O bună practică este, așa cum a spus Steve Perks, să eliminați tot conținutul neesențial, cum ar fi navigarea, reclamele și altele asemenea. Includeți doar conținutul principal al paginii. –  > Por Arve Systad.

Iată o soluție simplă: introduceți acest CSS

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

și aici este HTML-ul

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

Comentarii

  • O clasă ar fi o alegere mai bună decât un id aici, pentru simplul motiv că, dacă folosiți un id, atunci puteți aplica această regulă doar la un singur lucru pe pagină. O clasă v-ar permite să o aplicați oriunde este necesar. –  > Por Nick F.
  • Și cred că puteți schimba display:none în visibility:hidden dacă doriți ca elementele să ocupe același spațiu, dar să nu se afișeze. –  > Por alfadog67.
  • Deci, o soluție simplă și viabilă. Înainte am crezut că nu putem afecta versiunea de imprimare a paginii. –  > Por Victor Sokoliuk.

FIȘIER 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" >

ELEMENT

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

Ați putea plasa link-ul într-un div, apoi să utilizați JavaScript pe eticheta de ancorare pentru a ascunde div-ul atunci când se face clic pe el. Exemplu (nu a fost testat, s-ar putea să fie nevoie de modificări, dar ați înțeles ideea):

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

Dezavantajul este că, odată apăsat, butonul dispare și se pierde această opțiune pe pagină (există întotdeauna Ctrl+P, totuși).

Soluția mai bună ar fi să creați o foaie de stil de imprimare și în cadrul acesteia să specificați statutul ascuns al butonului printOption ID (sau cum îl numiți). Puteți face acest lucru în secțiunea head din HTML și puteți specifica o a doua foaie de stil cu un atribut media.

Cel mai bun lucru de făcut este să creați o versiune „doar pentru imprimare” a paginii.

Așteptați… nu mai suntem în 1999. Folosiți un CSS pentru imprimare cu „display: none”.

Comentarii

  • există încă o anumită valoare în versiunile de tipărire, deoarece afișează în mod clar utilizatorului ceea ce va obține atunci când tipărește, ceea ce poate fi abuzat cu ajutorul tehnicilor CSS…  > Por annakata.
  • În plus, puteți include conținut suplimentar în versiunea tipărită, cum ar fi referințe de linkuri, subsoluri etc. În zilele următoare, multe dintre aceste lucruri vor putea fi realizate și prin css. –  > Por Steve Perks.
  • @annakata: Utilizatorul poate obține deja acest lucru folosind „Print Preview” în browserul său. Ca un bonus, de fapt pentru asta este de fapt. –  > Por recursiv.

Răspunsul acceptat de diodus nu funcționează pentru unii dintre noi, dacă nu toți. nu am putut încă să ascund butonul meu Print this de a ieși pe hârtie.

Mica ajustare de către Clint Pachl de a apela fișierul css prin adăugarea pe

      media="screen, print" 

și nu doar

      media="screen"

este rezolvarea acestei probleme. Deci, pentru claritate și pentru că nu este ușor de văzut Clint Pachl ascuns ajutor suplimentar în comentarii. Utilizatorul ar trebui să includă „,print” în fișierul css cu formatul dorit.

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

și nu media implicită = „screen” numai.

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

Asta cred că rezolvă această problemă pentru toată lumea.

Dacă aveți Javascript care interferează cu proprietatea de stil a elementelor individuale, suprascriind astfel !important, vă sugerez să gestionați evenimentele onbeforeprint și onafterprint. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint