Anteprima di stampa JavaScript

Question

Come posso vedere l'anteprima di stampa della mia fattura generata dal sito web. Se stampo con lo script

<a href="javascript:window.print()">print this page</a> 

nella stampa "stampa questa pagina" anche stampato. Come posso nasconderlo?

Answer 1

È possibile ottenere la pagina corrente da stampare chiamando window.print(). Per esempio:

<a href="JavaScript:window.print();">Print this page</a> 

Se si vogliono dare loro un'idea di ciò che sarà simile stampata, è possibile utilizzare lo script su this page per dare loro un pseduo-preview del modo in cui la pagina con la stampa.

Answer 2

I browser non offrono un'API per attivare la funzionalità di anteprima di stampa nei browser.

Fortunatamente, quasi tutti lo tengono nel solito posto (penzolando dal menu File), quindi non dovresti attirare l'attenzione degli utenti su di esso.

Answer 3

È possibile creare print stylesheets separato per avere un controllo generale su come un sito verrà visualizzato nella stampa. Puoi mostrare il sito al tuo utente usando questo speciale foglio di stile di stampa prima di stampare. Ciò non ti dà tuttavia un'anteprima del 100%, poiché ogni browser gestisce le cose in modo un po 'diverso. Non vedrai come viene stampato finché non viene stampato. Tuttavia, l'uso di un foglio di stile per la stampa ti porterà molto vicino.

Alcuni sistemi operativi e driver di stampa offrono all'utente un'anteprima tra il pulsante Stampa e la stampa effettiva, ma non è qualcosa su cui si ha il controllo o che è sempre garantito.

Answer 4

Per rispondere direttamente alla domanda, quando si chiama il metodo di stampa() del browser stampa la pagina così com'è. Se si desidera stampare una versione diversa della pagina (senza l'elemento "Stampa questa pagina", ad esempio), sarà necessario creare una versione stampabile separata della pagina (in genere eseguita utilizzando un foglio di stile separato) che non ha quelle elementi che non vuoi nella pagina Stampata.

Answer 5

Affrontare la seguente parte della tua domanda:.

nella stampa "stampa anche questa pagina stampata

Come posso nasconderlo

Creare un nuovo foglio di stile (? in questo esempio, l'ho chiamato "print.css") e lo includo nel codice HTML come segue:

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

Nota il media="print" -questo significa che il foglio di stile verrà utilizzato solo quando si stampa la pagina.

successivo assegnare una classe al vostro elemento <a> in modo che possiamo fare riferimento a esso in CSS:

<a href="javascript:window.print()" class="noPrint">Print this Page</a> 

Infine, nel vostro file CSS, includono la seguente regola:

.noPrint { 
    display: none; 
} 

Ora il " Stampa questa pagina "il collegamento non dovrebbe apparire nella versione stampata della pagina.

Steve

Answer 6

Per nascondere il collegamento durante la stampa, procedere come segue:

<style type="text/css" media="print"> 
.printlink 
{ 
    display:none; 
} 
</style> 
<a href="javascript:windows.print()" class="printlink">print this page</a> 

alternativa:

<a href="javascript:windows.print()" 
onclick="this.style.display='none';" 
class="printlink"> 
print this page 
</a> 

Anche se questo non riapparirà dopo l'annullamento della stampa.

Answer 7

function Print() 
{  
    document.getElementById('ImagePrint').style.visibility='hidden';  
    window.print(); 
    document.getElementById('ImagePrint').style.visibility='visible';   
} 

nel corpo HTML

<div> 
    <a id="ImagePrint" onclick="return PrintReport();" style="vertical-align: top">print Info</a> 
</div> 

Questa funzione non mostrerà ur immagine nella stampa. puoi usare il tuo controllo piuttosto che l'immagine con l'id di controllo. speranza u otterrà ur soluzione

Answer 8

Si dovrebbe nascondere gli elementi che non si desidera essere visualizzati in stampa utilizzando

display:none 

ho scritto un tutorial su printing your webpage. Spero possa essere d'aiuto.

Answer 9

Sorprendentemente, nessuno ha ancora affrontato la

Come posso vedere l'anteprima di stampa della fattura generato dal sito

domanda. Ho solo bisogno di una funzionalità simile e si avvicinò con la soluzione in How to see the print media CSS in Firebug?

Answer 10

Questo è quello che ho usato:

printPage(evt: any) { 
    // add this 'noprint' class to elements you want to hide from printing 
    let hideElements = document.getElementsByClassName('noprint'); 
    let arr = Array.prototype.slice.call(hideElements) 
    arr.map(val => { 
     val.style.visibility = 'hidden'; 
    }) 
    let w = window.open(); 
    // 'main' is the section I want to print 
    w.document.write(document.getElementById('main').innerHTML); 
    w.print(); 
    w.close(); 
    arr.map(val => { 
     val.style.visibility = 'visible'; 
    }) 
}