Stampa solo?

Come posso stampare il div indicato (senza disabilitare manualmente tutti gli altri contenuti della pagina)?

Voglio evitare una nuova finestra di anteprima, quindi la creazione di una nuova finestra con questo contenuto non è utile.

La pagina contiene un paio di tabelle, una contiene il div che voglio stampare – la tabella è in stile con stili visivi per il web, che non dovrebbero mostrare in stampa.

Ecco una soluzione generale, utilizzando solo CSS , che ho verificato per funzionare.

@media print { body * { visibility: hidden; } #section-to-print, #section-to-print * { visibility: visible; } #section-to-print { position: absolute; left: 0; top: 0; } } 

Gli approcci alternativi non sono così buoni. L’utilizzo della display è complicato perché se un elemento è display:none quindi nessuno dei suoi discendenti verrà visualizzato. Per usarlo, devi cambiare la struttura della tua pagina.

L’utilizzo della visibility funziona meglio poiché è ansible triggersre la visibilità per i discendenti. Gli elementi invisibili influenzano ancora il layout, quindi sposto la section-to-print in alto a sinistra in modo che venga section-to-print correttamente.

Ho una soluzione migliore con codice minimo.

Metti la tua parte stampabile all’interno di un div con un id come questo:

 

Print me

Quindi aggiungi un evento come un onclick (come mostrato sopra) e passa l’id del div come ho fatto sopra.

Ora creiamo un javascript davvero semplice:

 function printDiv(divName) { var printContents = document.getElementById(divName).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML = printContents; window.print(); document.body.innerHTML = originalContents; } 

Nota quanto sia semplice? Niente popup, niente nuove windows, niente pazzi stili, niente librerie JS come jquery. Il problema con soluzioni davvero complicate (la risposta non è complicata e non è quello a cui mi riferisco) è il fatto che non si tradurrà MAI su tutti i browser, mai! Se vuoi rendere gli stili diversi, fai come mostrato nella risposta verificata aggiungendo l’attributo multimediale a un link del foglio di stile (media = “stampa”).

No fluff, leggero, funziona.

Tutte le risposte finora sono piuttosto carenti – o implicano l’aggiunta di class="noprint" a tutto o #printable display all’interno di #printable .

Penso che la soluzione migliore sarebbe quella di creare un wrapper attorno alle cose non stampabili:

     
Your normal page contents
Printer version

Ovviamente questo non è perfetto in quanto comporta un po ‘di movimento nel codice HTML …

Con jQuery è semplice come questo:

 w=window.open(); w.document.write($('.report_left_inner').html()); w.print(); w.close(); 

Potresti usare un foglio di stile di stampa e usare i CSS per organizzare il contenuto che volevi stampare? Leggi questo articolo per ulteriori suggerimenti.

Funziona bene:

  

Nota che funziona solo con “visibilità”. “display” non lo farà. Testato in FF3.

Non mi è piaciuta nessuna di queste risposte nel suo complesso. Se hai una class (ad esempio, l’area stampabile) e la hai come figlia del corpo, puoi fare qualcosa di simile nel tuo CSS di stampa:

 body > *:not(.printableArea) { display: none; } //Not needed if already showing body > .printableArea { display: block; } 

L’uso della visibilità può causare molti problemi di spaziatura e pagine vuote. Questo perché la visibilità mantiene lo spazio degli elementi, lo rende semplicemente nascosto, in cui il display lo rimuove e consente ad altri elementi di occupare il suo spazio.

Il motivo per cui questa soluzione funziona è che non stai afferrando tutti gli elementi, solo i figli immediati del corpo e li nascondi. Le altre soluzioni qui sotto con display css, nascondono tutti gli elementi, che influiscono su tutto all’interno del contenuto della creatività stampabile.

Non suggerirei javascript in quanto sarebbe necessario disporre di un pulsante di stampa che l’utente fa clic e i pulsanti di stampa del browser standard non avrebbero lo stesso effetto. Se hai davvero bisogno di farlo, quello che farei è memorizzare il codice HTML del corpo, rimuovere tutti gli elementi indesiderati, stampare, quindi aggiungere il codice HTML. Come già detto, eviterei questo se ansible e utilizzare un’opzione CSS come sopra.

NOTA: puoi aggiungere qualsiasi CSS nel CSS di stampa usando gli stili in linea:

  

O come di solito uso è un tag link:

  
  1. Dare qualsiasi elemento che si desidera stampare l’id printMe .

  2. Includi questo script nel tag head:

      
  3. Chiama la funzione

     Print 

hm … usa il tipo di un foglio di stile per la stampa … es .:

  

print.css:

 div { display: none; } #yourdiv { display: block; } 
  

Step 1: Scrivi il seguente javascript all’interno del tuo head tag

  

Passaggio 2: chiamare la funzione PrintMe (‘DivID’) da un evento onclick.

  
here is some text to print inside this div with an id 'divid'

Con CSS 3 puoi usare quanto segue:

 body *:not(#printarea) { display: none; } 

Ho preso il contenuto utilizzando JavaScript e creato una finestra che potrei stampare al posto …

Il metodo di Sandro funziona alla grande.

L’ho ottimizzato per consentire l’authorization di più collegamenti PrintMe, in particolare per essere utilizzato nelle pagine a tabs e nel testo in espansione.

function processPrint(printMe){ < - chiama per una variabile qui

var printReadyElem = document.getElementById(printMe); < - rimosso le virgolette su printMe per chiedere una variabile

Print < - passando l'ID div da stampare sulla funzione per trasformare la variabile printMe nell'ID div. sono necessarie le virgolette singole

printDiv (divId) : una soluzione generalizzata per stampare qualsiasi div in qualsiasi pagina.

Ho avuto un problema simile ma volevo (a) essere in grado di stampare l’intera pagina, o (b) stampare una delle varie aree specifiche. La mia soluzione, grazie a gran parte di quanto sopra, consente di specificare qualsiasi object div da stampare.

La chiave per questa soluzione è aggiungere una regola appropriata al foglio di stile del supporto di stampa in modo che venga stampato il div richiesto (e il suo contenuto).

Innanzitutto, crea il css di stampa necessario per sopprimere tutto (ma senza la regola specifica per consentire l’elemento che desideri stampare).

  

Nota che ho aggiunto nuove regole di class:

  • noprintarea ti consente di sopprimere la stampa di elementi all’interno del tuo div – sia il contenuto che il blocco.
  • noprintcontent ti consente di sopprimere la stampa di elementi all’interno del tuo div- il contenuto viene soppresso ma e l’area allocata viene lasciata vuota.
  • stampa consente di disporre di elementi visualizzati nella versione stampata ma non nella pagina dello schermo. Questi avranno normalmente “display: none” per lo stile dello schermo.

Quindi inserire tre funzioni JavaScript. Il primo semplicemente triggers e distriggers il foglio di stile dei supporti di stampa.

 function disableSheet(thisSheet,setDisabled) { document.styleSheets[thisSheet].disabled=setDisabled; } 

Il secondo fa il vero lavoro e il terzo ripulisce dopo. Il secondo (printDiv) triggers il foglio di stile dei supporti di stampa, quindi aggiunge una nuova regola per consentire al div desiderato di stampare, emette la stampa e aggiunge un ritardo prima della pulizia finale (altrimenti gli stili possono essere ripristinati prima che la stampa sia effettivamente fatto.)

 function printDiv(divId) { // Enable the print CSS: (this temporarily disables being able to print the whole page) disableSheet(0,false); // Get the print style sheet and add a new rule for this div var sheetObj=document.styleSheets[0]; var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;"; if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); } else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); } print(); // need a brief delay or the whole page will print setTimeout("printDivRestore()",100); } 

Le funzioni finali eliminano la regola aggiunta e impostano di nuovo lo stile di stampa su distriggersto in modo che l’intera pagina possa essere stampata.

 function printDivRestore() { // remove the div-specific rule var sheetObj=document.styleSheets[0]; if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); } else { sheetObj.deleteRule(sheetObj.cssRules.length-1); } // and re-enable whole page printing disableSheet(0,true); } 

L’unica altra cosa da fare è aggiungere una riga all’elaborazione onload in modo che lo stile di stampa sia inizialmente distriggersto, consentendo così la stampa di intere pagine.

  

Quindi, da qualsiasi punto del documento, puoi stampare un div. Basta emettere printDiv (“thedivid”) da un pulsante o qualsiasi altra cosa.

Un grande vantaggio per questo approccio fornisce una soluzione generale per la stampa di contenuti selezionati all’interno di una pagina. Permette anche l’uso di stili esistenti per gli elementi che sono stampati, incluso il div contenente.

NOTA: nella mia implementazione, questo deve essere il primo foglio di stile. Modificare i riferimenti del foglio (0) al numero di foglio appropriato se è necessario farlo in seguito nella sequenza del foglio.

@Kevin Florida Se hai più div con la stessa class, puoi usarlo in questo modo:

  

stavo usando il tipo di contenuto interno di Colorbox

 $(document).on('click', '.printdiv-btn', function(e) { e.preventDefault(); var $this = $(this); var originalContent = $('body').html(); var printArea = $this.parents('.printableArea').html(); $('body').html(printArea); window.print(); $('body').html(originalContent); }); 

Nel mio caso dovevo stampare un’immagine all’interno di una pagina. Quando ho usato la soluzione votata, avevo 1 pagina bianca e l’altra mostrava l’immagine. Spero che aiuti qualcuno.

Ecco il css che ho usato:

 @media print { body * { visibility: hidden; } #not-print * { display: none; } #to-print, #to-print * { visibility: visible; } #to-print { display: block !important; position: absolute; left: 0; top: 0; width: auto; height: 99%; } } 

Il mio html è:

 
< %= image_tag @qrcode.image_url, size: "250x250" , alt: "#{@qrcode.name}" %>

Usa un foglio di stile speciale per la stampa

  

e quindi aggiungi una class, ad esempio “noprint”, ad ogni tag che è il contenuto che non vuoi stampare.

Nell’uso CSS

 .noprint { display: none; } 

Se si desidera stampare solo questo div, è necessario utilizzare le istruzioni:

 @media print{ *{display:none;} #mydiv{display:block;} } 

La funzione printDiv () è stata pubblicata alcune volte, ma in quel caso perdi tutti gli elementi di rilegatura e i valori di input. Quindi, la mia soluzione è creare un div per tutto ciò che si chiama “body_allin” e un altro al di fuori del primo chiamato “body_print”.

Quindi chiami questa funzione:

 function printDiv(divName){ var printContents = document.getElementById(divName).innerHTML; document.getElementById("body_print").innerHTML = printContents; document.getElementById("body_allin").style.display = "none"; document.getElementById("body_print").style.display = ""; window.print(); document.getElementById("body_print").innerHTML = ""; document.getElementById("body_allin").style.display = ""; document.getElementById("body_print").style.display = "none"; } 

È ansible utilizzare uno stile CSS separato che disabilita tutti gli altri contenuti tranne quello con l’id “printarea”.

Vedi CSS Design: Going to Print per ulteriori spiegazioni ed esempi.

Avevo più immagini ognuna con un pulsante e avevo bisogno di cliccare su un pulsante per stampare ogni div con un’immagine. Questa soluzione funziona se ho disabilitato la cache nel mio browser e la dimensione dell’immagine non cambia in Chrome:

  function printDiv(divName) { var printContents = document.getElementById(divName).innerHTML; w = window.open(); w.document.write(printContents); w.document.write('' + 'window.onload = function() { window.print(); window.close(); };' + ''); w.document.close(); // necessary for IE >= 10 w.focus(); // necessary for IE >= 10 return true; } 

Print me

Un altro approc no senza influenzare la pagina corrente e persiste anche il css durante la stampa. Qui il selettore deve essere il selettore div specifico di quale contenuto dobbiamo stampare.

 printWindow(selector, title) { var divContents = $(selector).html(); var $cssLink = $('link'); var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth * 0.6); printWindow.document.write('

' + title + '

'); for(var i = 0; i< $cssLink.length; i++) { printWindow.document.write($cssLink[i].outerHTML); } printWindow.document.write(''); printWindow.document.write(divContents); printWindow.document.write(''); printWindow.document.close(); printWindow.onload = function () { printWindow.focus(); setTimeout( function () { printWindow.print(); printWindow.close(); }, 100); } }

Qui ha fornito un po ‘di tempo per mostrare che viene applicato un css esterno.

Puoi usare questo: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

Oppure usa visibility:visible e visibility:hidden proprietà css visibility:hidden insieme a @media print{}

‘display: none’ nasconde tutto ‘nested’ display: block ‘. Questa non è una soluzione.

Il miglior css adatto all’altezza dello spazio vuoto:

 @media print { body * { visibility: hidden; height:0; } #section-to-print, #section-to-print * { visibility: visible; height:auto; } #section-to-print { position: absolute; left: 0; top: 0; } } 

Ho provato molte delle soluzioni fornite. Nessuno di loro ha funzionato perfettamente. Perdono i collegamenti CSS o JavaScript. Ho trovato una soluzione perfetta e facile che né perdite CSS né collegamenti JavaScript.

HTML:

 

This is a sample text for printing purpose.

Do not print.

Javascript:

 function printFunc() { var divToPrint = document.getElementById('printarea'); var htmlToPrint = '' + ''; htmlToPrint += divToPrint.outerHTML; newWin = window.open(""); newWin.document.write("

Print Page

"); newWin.document.write(htmlToPrint); newWin.print(); newWin.close(); }