Stampa solo <div id = "printarea"> </div>?

444

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

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

La pagina contiene un paio di tabelle, una delle quali contiene il div che voglio stampare: la tabella è in stile con stili visivi per il web, che non dovrebbe essere mostrata in stampa.

javascript  css  printing  dhtml 
— noesgard
fonte
1
stackoverflow.com/questions/2255291/… questo collegamento funziona perfettamente
— Jinna Balu

Risposte:

793

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'uso displayè complicato perché se un elemento ha display:nonequindi nessuno dei suoi discendenti verrà visualizzato. Per usarlo, devi cambiare la struttura della tua pagina.

L'uso visibilityfunziona meglio poiché puoi attivare la visibilità per i discendenti. Gli elementi invisibili hanno comunque un impatto sul layout, quindi mi sposto section-to-printin alto a sinistra in modo che venga stampato correttamente.

— Bennett McElwee
fonte
21
questo è di gran lunga il modo più veloce e pulito, mi chiedo perché questa risposta non abbia ottenuto il maggior numero di voti.
— Dany Khalife,
34
Un problema a cui prestare attenzione con questa soluzione è che in alcuni casi è possibile finire per stampare migliaia di pagine vuote. Nel mio caso sono stato in grado di risolverlo utilizzando un display aggiuntivo: nessuno stile per gli elementi selezionati, ma forse una soluzione più generale è ottenibile da una combinazione di anche forzare altezze, trabocco: nessuno e posizionamento assoluto per tutti i div o qualcosa del genere.
— Malcolm MacLeod,
5
Questo è un ottimo inizio, ma ho avuto due problemi con esso: per uno se uno dei genitori dell'elemento stabilisse il proprio posizionamento relativo / assoluto, il contenuto sarebbe comunque compensato se non lo position:fixedusassi. Tuttavia, Chrome e Safari troncano anche i contenuti, soprattutto dopo la prima pagina. Così la mia soluzione finale era quello di impostare sia il bersaglio e tutti i suoi genitori aoverflow:visible; position:absolute !important; top:0;left:0
— natevw
1
@ dudeNumber4 #section-to-printcorrisponde alla sezione stessa; #section-to-print *corrisponde a ciascun sottoelemento della sezione. Quindi quella regola rende solo visibile la sezione e tutto il suo contenuto.
— Bennett McElwee,
3
Puoi provare una soluzione JavaScript, ma non funzionerà se l'utente utilizza il comando Stampa del browser.
— Bennett McElwee,
243

Ho una soluzione migliore con un codice minimo.

Inserisci la tua parte stampabile all'interno di un div con un ID come questo:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

Quindi aggiungi un evento come un clic (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;
}

Notate quanto è semplice? Nessun popup, nessuna nuova finestra, nessuno stile folle, nessuna libreria JS come jquery. Il problema con soluzioni davvero complicate (la risposta non è complicata e non è quello a cui mi riferisco) è il fatto che non tradurrà MAI su tutti i browser, mai! Se vuoi rendere diversi gli stili, fai come mostrato nella risposta selezionata aggiungendo l'attributo media a un link al foglio di stile (media = "stampa").

Nessuna lanugine, leggera, funziona e basta.

— Kevin Florida
fonte
@Kevin provo questo per il modulo ma stampa un modulo vuoto (senza dati) e ho bisogno di un modulo compilato da stampare prima di inviare
— Arif
98
@asprin warning! Questo non è un codice privo di confusione. L'uso di innerHTML per cancellare e ricreare l'intero corpo va bene per le pagine semplici, ma con personalizzazioni più avanzate (menu, presentazioni, ecc.) Potrebbe cancellare alcuni comportamenti dinamici aggiunti da altri script.
— Christophe,
17
Questa soluzione non funzionerà in nessuna pagina complessa in cui gli elementi nell'area stampabile dipendono dagli stili e / o dalla posizione degli elementi principali. Se estrai il div stampabile, potrebbe sembrare completamente diverso perché mancano tutti i genitori.
— Andrei Volgin,
1
Purtroppo non funziona bene in Chrome se chiudi la finestra di anteprima di stampa, quindi provi a fare un jQuery .click. È un peccato, perché il codice è così leggero.
— Rybo111,
3
@BorisGappov un esempio molto semplice con un solo evento click per dimostrare il mio punto: jsfiddle.net/dc7voLzt Lo dirò di nuovo: questo non è un codice privo di errori ! Il problema non riguarda la stampa stessa, si tratta di ripristinare la pagina originale!
— Christophe,
121

Tutte le risposte finora sono abbastanza viziata - che o coinvolgono l'aggiunta class="noprint"a tutto ciò, né da volere rovinare displayall'interno #printable.

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

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

Naturalmente questo non è perfetto in quanto comporta un po 'di movimento nel tuo HTML ...

— Greg
fonte
Penso che tu abbia ragione, ma come posso uccidere lo stile del tavolo che circonda il div (se è possibile rimuovere lo stile - posso stampare il tavolo ed escludere abbastanza facilmente il resto del contenuto
— noesgard
Uso Javascript per raccogliere i contenuti necessari e CSS come sopra
— noesgard
9
Preferisco usare HTML semantico. La formattazione della stampa dovrebbe essere idealmente gestita dai CSS. Vedi la mia risposta per come fare questo: stackoverflow.com/questions/468881/…
— Bennett McElwee,
Concordo con Bennett, usare la visibilità anziché il display è una soluzione molto più pulita
— guigouz,
In basso ho fatto una soluzione davvero semplice su questo thread che penso soddisferà meglio le esigenze del richiedente. Non si basa su un foglio di stile di stampa, può essere riciclato su tutto il sito Web ed è incredibilmente leggero.
— Kevin Florida,
108

Con jQuery è semplice come questo:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
— romaninsh
fonte
3
Questo è piuttosto interessante, anche se appare in Chrome come popup bloccato.
— Rafi Jacoby,
8
il trucco è chiamarlo su un evento generato dall'utente come un clic del mouse. puoi anche aggiungere dopo la prima riga: if (! w) alert ('Please enable pop-up');
— romaninsh,
1
qualcuno ha funzionato su IE11? Apre solo una finestra e la chiude immediatamente. Funziona in Chrome, FF e Safari però.
— greatwitenorth
3
Ho perso il CSS durante la stampa con questo, c'è un modo per mantenere il CSS?
— Moxet Khan,
2
@MoxetKhan, questo post ha una soluzione con css vevlo.com/how-to-print-div-content-using-javascript
— lakesare
22

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

— Paul Dixon
fonte
Ho un foglio di stile di stampa - cercando di evitare di inserire una regola di stile in tutti gli altri contenuti ...
— Noesgard,
Ho una tabella con lo stile attivo, contenente il div in questione, se imposto la visualizzazione della tabella: nessuna - posso ancora visualizzare il div?
— Noesgard,
Penso di sì, e potresti provare a contrassegnare la regola come! Importante per aumentarla!
— Paul Dixon,
se la tabella non viene visualizzata, non importa anche se il div è impostato su 'display: awesome;'. Il genitore è nascosto, così come i bambini. È una situazione in cui hai bisogno di una tabella o è solo per il layout di pagina?
— Roborourke,
"Boom, colpo alla testa!" per layout di tabella. = |
— ANeves
19

Funziona bene:

<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

Si noti che questo funziona solo con "visibilità". "display" non lo farà. Testato in FF3.

— Christian Maioli M.
fonte
15

Non mi è piaciuta davvero nessuna di queste risposte nel loro insieme. Se hai una classe (diciamo printableArea) e la hai come un figlio immediato del corpo, puoi fare qualcosa del genere nel tuo CSS di stampa:

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

Per coloro che cercano l'Area stampabile in un altro posto, è necessario assicurarsi che vengano mostrati i genitori dell'Area stampabile:

body > *:not(.parentDiv),
.parentDiv > *: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, mentre 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 nascondendoli. Le altre soluzioni sottostanti con display css nascondono tutti gli elementi, il che influenza tutto all'interno del contenuto stampabile dell'Area.

Non consiglierei javascript in quanto avresti bisogno di un pulsante di stampa su cui l'utente fa clic e i pulsanti di stampa del browser standard non avrebbero lo stesso effetto. Se hai davvero bisogno di farlo, ciò che farei è memorizzare l'html del corpo, rimuovere tutti gli elementi indesiderati, stampare, quindi aggiungere nuovamente l'html. Come accennato però, lo eviterei se è possibile e utilizzare un'opzione CSS come sopra.

NOTA: è possibile aggiungere qualunque CSS nel CSS di stampa utilizzando gli stili incorporati:

<style type="text/css">
@media print {
   //styles here
}
</style>

O come di solito uso è un tag di collegamento:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />
— fanfavorite
fonte
Cosa succede se il div che si desidera stampare non è "un figlio immediato del corpo"? Sto provando a farlo in vue.js .. Ma sto usando molte pagine vuote quando uso la risposta accettata.
— svenema,
@svenema, puoi usare qualsiasi CSS tu voglia. Questo era solo un esempio.
— fanfavorite il
hmm, comunque, quando provo questo, in realtà non ci sono altre pagine vuote, ma anche il div stampabile dell'Area non viene mostrato; Ho solo 1 pagina vuota vuota quando uso questo codice.
— Svenema,
Ho scoperto che è davvero perché il div stampabile dell'Area non è un figlio diretto del tag body, quando lo faccio un figlio diretto la tua soluzione funziona; tuttavia, nel mio caso, non posso rendere l'Area stampabile un figlio diretto. C'è un modo per aggirare questo?
— Svenema,
@svenema, per favore vedi la mia modifica sopra.
— fanfavorite
8

  1. Fornisci qualunque elemento desideri stampare l'id printMe.

  2. Includi questo script nel tag head:

    <script language="javascript">
    var gAutoPrint = true;

    function processPrint(){

    if (document.getElementById != null){
    var html = '<HTML>\n<HEAD>\n';
    if (document.getElementsByTagName != null){
    var headTags = document.getElementsByTagName("head");
    if (headTags.length > 0) html += headTags[0].innerHTML;
    }

    html += '\n</HE' + 'AD>\n<BODY>\n';
    var printReadyElem = document.getElementById("printMe");

    if (printReadyElem != null) html += printReadyElem.innerHTML;
    else{
    alert("Error, no contents.");
    return;
    }

    html += '\n</BO' + 'DY>\n</HT' + 'ML>';
    var printWin = window.open("","processPrint");
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();

    if (gAutoPrint) printWin.print();
    } else alert("Browser not supported.");

    }
</script>

  3. Chiama la funzione

    <a href="javascript:void(processPrint());">Print</a>
— Jason Plank
fonte
Questo è un buon lavoro Ma è troppo complicato e non funzionerà correttamente tra browser (in particolare i browser più vecchi). Ti suggerisco di dare un'occhiata alla mia soluzione di seguito.
— Kevin Florida,
6

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

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

print.css:

div { display: none; }
#yourdiv { display: block; }
— Andreas Niedermair
fonte
Questo non funzionerà se il documento non è basato su DIV o #yourdiv include anche ulteriori DIV.
— Gumbo,
#yourdiv * {display: ...} se lo metti in cima alla pagina e disponi di un browser aggiornato, puoi quindi lavorare con più selettori per nascondere i non-div
— Andreas Niedermair,
"#yourdiv * {display: ...}" - cosa dovrebbe essere il ... senza interrompere il layout?
— Greg,
Ciò visualizzerebbe gli elementi incorporati anche come elementi di blocco. Ma "#yourdiv, #yourdiv div {display: block}" lo farà.
— Gumbo,
@dittodhole - pensaci un minuto. Cosa potresti inserire lì che non romperà il layout all'interno di #yourdiv?
— Greg,
6 
<script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>

— Dilip Kr Singh
fonte
6
sembra bello ma perdi tutti i collegamenti javascript e altri dopo la stampa
— Julien
1
Stampa senza CSS.
— Moxet Khan,
6

Passaggio 1: scrivi il seguente javascript nel tag head

<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
   var content_vlue = document.getElementById(DivID).innerHTML;
   var docprint=window.open("","",disp_setting);
   docprint.document.open();
   docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
   docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
   docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
   docprint.document.write('<head><title>My Title</title>');
   docprint.document.write('<style type="text/css">body{ margin:0px;');
   docprint.document.write('font-family:verdana,Arial;color:#000;');
   docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
   docprint.document.write('a{color:#000;text-decoration:none;} </style>');
   docprint.document.write('</head><body onLoad="self.print()"><center>');
   docprint.document.write(content_vlue);
   docprint.document.write('</center></body></html>');
   docprint.document.close();
   docprint.focus();
}
</script>

Passaggio 2: chiamare la funzione PrintMe ('DivID') tramite un evento onclick.

<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>
— Hardik Thaker
fonte
Questo è quello! Usato per un modale e Gallerys. Nessun errore Javascript dopo la chiusura. Davvero utile soprattutto quando usi modali più lunghi di una pagina. Lo avvolge bene. Perfetto per le persone che vogliono stampare per archiviare.
— TheWeeezel,
2

Con CSS 3 è possibile utilizzare quanto segue:

body *:not(#printarea) {
    display: none;
}
— Gumbo
fonte
Non posso usare quello che temo ... (correggimi se sbaglio) la pagina su cui sto lavorando è asp.net 1.1 / DHTML
— noesgard
Dipende dal browser se il selettore: not () è già disponibile o meno.
— Gumbo,
Bene, allora la mia proposta è solo uno sguardo al futuro ... No, sul serio. L'ho appena menzionato per completezza. So che al momento non è praticabile. Purtroppo.
— Gumbo,
Potresti usare jQuery e questo selettore che (penso) funzionerebbe in IE6 - $ ('body *: not (#printarea)'). Style ('display', 'none');
— David Heggie,
2
questo nasconderà tutti i discendenti di #printarea, poiché sono abbinati a *: not (#printarea). Quindi in pratica finisci con un contenitore vuoto.
— cytofu,
2

Ho preso il contenuto usando JavaScript e ho creato una finestra che avrei potuto stampare al posto ...

— noesgard
fonte
Puoi condividere il codice, ha il problema di adottare css
— Moxet Khan il
2

Il metodo di Sandro funziona alla grande.

L'ho modificato per consentire l'utilizzo di più collegamenti printMe, in particolare da utilizzare nelle pagine a schede e nell'espansione del testo.

function processPrint(printMe){ <- richiede una variabile qui

var printReadyElem = document.getElementById(printMe); <- rimosse le virgolette attorno a printMe per chiedere una variabile

<a href="javascript:void(processPrint('divID'));">Print</a><- passando l'ID div da stampare sulla funzione per trasformare la variabile printMe nell'ID div. sono necessarie virgolette singole

2

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

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

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

Innanzitutto, crea i css di stampa necessari per sopprimere tutto (ma senza la regola specifica per consentire l'elemento che desideri stampare). 

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

Nota che ho aggiunto nuove regole di classe:

  • noprintarea ti consente di sopprimere la stampa di elementi all'interno della tua divisione, sia il contenuto che il blocco.
  • noprintcontent ti permette di sopprimere la stampa di elementi all'interno della tua divisione: il contenuto viene soppresso ma l'area allocata viene lasciata vuota.
  • stampa consente di avere elementi che vengono 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 attiva e disattiva semplicemente 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 pulisce in seguito. Il secondo (printDiv) attiva il foglio di stile dei supporti di stampa, quindi aggiunge una nuova regola per consentire la stampa del div desiderato, emette la stampa e quindi aggiunge un ritardo prima delle pulizie finali (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 nuovamente lo stile di stampa su disabilitato in modo da poter stampare l'intera pagina. 

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 disabilitato, consentendo così la stampa di tutta la pagina. 

<body onLoad='disableSheet(0,true)'>

Quindi, da qualsiasi parte del documento, è possibile stampare un div. Rilascia semplicemente printDiv ("theedivid") da un pulsante o altro.

Un grande vantaggio per questo approccio fornisce una soluzione generale per la stampa di contenuti selezionati all'interno di una pagina. Consente inoltre l'uso di stili esistenti per gli elementi stampati, incluso il div contenente.

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

— DrDave
fonte
2

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

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

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);
});
— Stefan
fonte
2

Nel mio caso ho dovuto stampare un'immagine all'interno di una pagina. Quando ho usato la soluzione votata, avevo 1 pagina vuota e l'altra mostrava l'immagine. Spero che possa aiutare 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 è:

<div id="not-print" >
  <header class="row wrapper page-heading">

  </header>

  <div class="wrapper wrapper-content">
    <%= image_tag @qrcode.image_url,  size: "250x250" , alt: "#{@qrcode.name}" %>
  </div>
</div>

<div id="to-print" style="display: none;">
  <%= image_tag @qrcode.image_url,  size: "300x300" , alt: "#{@qrcode.name}" %>
</div>
— Raffaello Monteiro
fonte
2

I migliori css per adattarsi allo spazio vuoto altezza:

@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;
  }
}
— TRI ÂN
fonte
2

Il modo migliore per stampare particolari div o qualsiasi elemento

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}
— Mahetab
fonte
1

Utilizzare un foglio di stile speciale per la stampa

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

e quindi aggiungere una classe, ad esempio "noprint" a ogni tag il cui contenuto non si desidera stampare.

Nell'uso CSS 

.noprint {
  display: none;
}
— Xn0vv3r
fonte
1

Se vuoi solo stampare questo div, devi usare le istruzioni:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}
— Jason Plank
fonte
1

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

Quindi si chiama 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";

}
— pmrotule
fonte
Questa riga potrebbe essere utile se desideri un ID univoco: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / G, 'id = $ 1 $ 2_2 $ 3');
— pmrotule,
1

È possibile utilizzare uno stile CSS separato che disabilita tutti gli altri contenuti tranne quello con l'id "printarea".

Vedi CSS Design: andare a stampare per ulteriori spiegazioni ed esempi.

— Kosi2801
fonte
Aggiornato il collegamento alla nuova posizione. Un commento invece di un downvote sarebbe stato bello.
— Kosi2801,
1

Avevo più immagini ognuna con un pulsante e avevo bisogno di fare clic 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('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
— live-love
fonte
1

Ancora una volta senza influire sulla pagina corrente e persiste anche il CSS durante la stampa. Qui il selettore deve essere un selettore div specifico 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('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

Qui fornito del timeout mostra che i CSS esterni vengono applicati ad esso.

— Mukesh Kumar Suman
fonte
A volte CSS richiede tempo per caricarsi, questo approccio è quello che stavo cercando di ricaricare la pagina prima della stampa. Grazie
— Arpit Shrivastava,
1

Ho provato molte delle soluzioni fornite, nessuna delle quali ha funzionato perfettamente. Perdono i collegamenti CSS o JavaScript. Ho trovato una soluzione semplice e perfetta che non perde vincoli CSS o JavaScript.

HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

Javascript: 

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }
— BibanCS
fonte
Questa apertura e creazione di un'altra finestra che non funziona su Android. Funziona solo direct window.print ().
— Merv
1

Sono in ritardo a questa festa, ma mi piacerebbe presentare un altro approccio. Ho scritto un piccolo modulo JavaScript chiamato PrintElements per la stampa dinamica di parti di una pagina web.

Funziona ripetendo gli elementi del nodo selezionati e, per ciascun nodo, attraversa l'albero DOM fino all'elemento BODY. Ad ogni livello, incluso quello iniziale (che è il livello del nodo da stampare), collega una classe marker ( pe-preserve-print) al nodo corrente. Quindi collega un'altra classe marker ( pe-no-print) a tutti i fratelli del nodo corrente, ma solo se non è presente alcuna pe-preserve-printclasse. Come terzo atto, collega anche un'altra classe agli elementi antenati conservati pe-preserve-ancestor.

Un semplice CSS supplementare di sola stampa nasconde e mostra i rispettivi elementi. Alcuni vantaggi di questo approccio sono che tutti gli stili sono preservati, non apre una nuova finestra, non è necessario spostarsi tra molti elementi DOM e in generale non è invasivo con il documento originale.

Guarda la demo o leggi l'articolo correlato per ulteriori dettagli .

— András Szepesházi
fonte
0

Ho trovato la soluzione

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}
— user2573099
fonte
0

basandomi sulla risposta di @Kevin in Florida, ho creato un modo per evitare lo script disabilitato nella pagina corrente a causa della sovrascrittura dei contenuti. Uso un altro file chiamato "printScreen.php" (o .html). Avvolgi tutto ciò che vuoi stampare in un div "printSource". E con JavaScript, apri una nuova finestra che hai creato prima ("printScreen.php"), quindi prendi il contenuto in "printSource" della finestra superiore.

Ecco il codice

Finestra principale : 

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

Questo è "printScreen.php" - un altro file per prendere il contenuto da stampare 

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>
— QeiNui
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.