Cum pot ascunde un element atunci când imprimați o pagină web?

Am un link pe pagina mea pentru a imprima pagina web. Cu toate acestea, link-ul este, de asemenea, vizibile în partea de imprimat în sine.

Există javascript sau HTML cod care s-ar ascunde link-ul de buton atunci când fac clic pe link-ul de imprimare?

Exemplu:

 "Good Evening"
 Print (click Here To Print)

Vreau să ascund acest "Print" etichetă atunci când se imprimă text "Bună Seara". "Print" etichetă nu trebuie să prezinte pe partea de imprimat în sine.

TRiG
Întrebarea editată 14 octombrie 2015 в 11:14
Programare
printing css
10 decembrie 2008 в 7:11
43 vizualizări

În stylesheet adauga:

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

Apoi se adaugă class='nu-print' (sau adăugați nici-print clasa la o clasă existentă declarație) în HTML pe care nu't doriți să apară în varianta tipărită, cum ar fi butonul.

The Guy with The Hat
Răspuns editat 4 decembrie 2018 в 3:22
Comentarii (8)

Cea mai bună practică este de a utilizați o foaie de stil în mod special pentru imprimare, și și setați "mass-media "atribut " imprimare".

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

rudolph1024
Răspuns editat 17 iulie 2015 в 8:55
Comentarii (2)

Bootstrap 3-a sale proprii clasa pentru aceasta numit:

hidden-print

Acesta este definit astfel:

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

Nu trebuie să-l definească pe cont propriu.

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

.d-print-none
Bijan
Răspuns editat 2 aprilie 2019 в 8:51
Comentarii (2)

Aici este o soluție simplă pune asta CSS 


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

și aici este 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>
Tac Tacelosky
Răspuns editat 20 februarie 2019 в 12:19
Comentarii (2)

FIȘIER CSS 

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }

    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

ANTET HTML

ELEMENT

<div class="no-print"></div>
Comentarii (0)

Ai putea pune link-ul într-un div, apoi utilizați JavaScript pe etichetă ancoră pentru a ascunde div atunci cand este apasat. Exemplu (nu a fost testat, poate fi necesar să fie optimizat, dar ai prins ideea):

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

Dezavantajul este ca odata apasat, butonul dispare și-au pierdut această opțiune pe pagina (nu's mereu Ctrl+P, deși).

Cea mai bună soluție ar fi de a crea un stil de imprimare și în care de stil specifica ascunse statutul de printOption ID (sau cum se numesc). Puteți face acest lucru în secțiunea head HTML și specifica o a doua foaie de stil cu un atribut media.

Lucky
Răspuns editat 14 martie 2017 в 1:23
Comentarii (0)

Cel mai bun lucru de făcut este de a crea un "print-doar" versiune a paginii.

Oh, stai... asta e't mai 1999. Utilizați un print CSS cu "display: none".

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

<div>
  Yup
</div>
Comentarii (0)

La răspunsul acceptat de diodus nu este de lucru pentru unele, dacă nu toate dintre noi. Nu am putut încă să-mi ascund de Imprimare acest buton de gând pe hârtie.

Mica ajustare de Clint Pachl de asteptare css fișiere 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 pentru a vedea Clint Pachl ascunse ajutor suplimentar în comentarii. Utilizatorul ar trebui să includă ",print" în css fișiere cu extensia dorită formating.

și nu implicit mass-media = "ecran" numai.

Cred că rezolvă această problemă pentru toată lumea.

Comentarii (0)

Dacă aveți Javascript care interferează cu stilul de proprietate de elemente individuale, astfel imperative !important, sugerez manipularea evenimentelor onbeforeprint " și " onafterprint`. https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint

Comentarii (0)