Stampa il contenuto di un DIV

337

Qual è il modo migliore per stampare il contenuto di un DIV?

javascript  jquery  html  printing 
— UserTest
fonte
Prova a stampare l'elemento qui
— Gabe,
1
Cosa intendi per stampa? Come in una stampante fisica?
— Yuriy Faktorovich,
"Stampa" come su una stampante? o al documento?
— Ed Schembor,
Finora ho trovato il miglior plugin sviluppato da etimbo github.com/etimbo/jquery-print-preview-plugin
— MaxI
3
Proprio come riferimento per chiunque cerchi di cercare una soluzione a questa domanda di stampa di un div. Ho trovato molto utile la seguente risposta: stackoverflow.com/a/7532581/405117
— Vikram

Risposte:

518

Lievi modifiche rispetto alla versione precedente - testato su CHROME

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

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

    mywindow.print();
    mywindow.close();

    return true;
}
— Bill Paetzke
fonte
8
Questa è una soluzione rapida. La soluzione ideale è utilizzare un CSS separato per la stampa. Forse puoi approfondire i dettagli (requisiti) del tuo problema.
— Bill Paetzke,
6
È possibile fare riferimento al foglio di stile nella finestra popup. Aggiungi un'altra riga di codice tra i tag <head>: mywindow.document.write ('<link rel = "foglio di stile" href = "main.css" type = "text / css" />');
— Bill Paetzke,
5
@Rahil cambiarlo in questo: mywindow.document.close (); mywindow.focus (); mywindow.print (); mywindow.close ();
— ROFLwTIME,
3
^ aggiungi newwindow.focus (); per abilitare la stampa tra browser.
— JackMahoney,
7
A volte succede se non riesce a caricare l'anteprima di stampa, forse quando il contenuto da stampare è abbastanza grande (l'ho notato solo con Chrome mentre la stessa pagina stampa perfettamente in Firefox, tuttavia non escludo che potrebbe accadere anche in Firefox o altri browser). Il modo migliore che ho trovato è di eseguire la stampa (e chiudere) solo dopo il caricamento di Windows. Quindi dopo: mywindow.document.write(data);Aggiungi questo: mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');E rimuovi: mywindow.print();emywindow.close();
— Fabius il
164

Penso che ci sia una soluzione migliore. Fai il tuo div per stampare coprire l'intero documento, ma solo quando viene stampato:

@media print {
    .myDivToPrint {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}
— AVANTI CRISTO.
fonte
Perfetto, molto più bello di un popup.
— GreenWebDev
5
Purtroppo, non funzionerà in IE del tutto come previsto, vedere questo: stackoverflow.com/questions/975129/...
— jarek.jpa
16
Il contenuto che dovrebbe traboccare su più pagine sembra troncato in Chrome.
— Ishmael Smyrnow,
Su IE è necessario nascondere il resto del documento. La modifica sopra come segue funzionerà: @media print {body * {display: none; } .myDivToPrint {display: block; colore di sfondo: bianco; altezza: 100%; larghezza: 100%; posizione: fissa; in alto: 0; sinistra: 0; margine: 0; imbottitura: 15px; dimensione carattere: 14px; altezza della linea: 18 px; }}
— RonnBlack,
2
Potrebbe essere necessario inserire z-index: 9999999; nel caso abbiate altri elementi posizionati più in alto.
— Adam M.,
43

Anche se questo è stato detto da @gabe , se stai usando jQuery, puoi usare il mio printElementplugin.

C'è un esempio qui e maggiori informazioni sul plugin qui .

L'utilizzo è piuttosto semplice, basta prendere un elemento con un selettore jQuery e stamparlo:

$("#myDiv").printElement();

Spero possa essere d'aiuto!

— Erik
fonte
14
8 anni dopo, questo produrrà "a.browser non è definito" perché la chiamata a .browser è stata rimossa in jquery 1.9
— KingsInnerSoul
1
@KingsInnerSoul non essere così scortese con gli utenti di jQuery, questi tempi sono abbastanza difficili per loro; p
— Alexandre Daubricourt
22

Usando Jquery, usa semplicemente questa funzione:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>

Il pulsante di stampa sarà simile al seguente:

<button id="print" onclick="printContent('id name of your div');" >Print</button>

Modifica: se hai i dati del modulo che devi conservare, il clone non li copia, quindi dovrai solo prendere tutti i dati del modulo e sostituirli dopo il ripristino in questo modo:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>
— Gary Hayes
fonte
$ ( 'body') html (restorepage).; non funzionerà perché in quel momento non è disponibile alcun elemento body. quindi sarà meglio sostituirlo con location.reload ();
— Debugger,
No. Se ricarichi la pagina, eliminerai qualsiasi informazione nei moduli o qualsiasi altra impostazione che potrebbe essere necessaria. Funziona perfettamente. Se ti prendi il tempo per guardare il codice, vedrai che var restorepage ha tutte le informazioni sulla pagina disponibili per effettuare la sostituzione. Smetti di provare a modificare il mio codice e testalo tu stesso o impara cosa fanno ognuna delle parti della funzione.
— Gary Hayes,
Questo è meglio. Include il design della pagina durante la stampa a differenza di quelli sopra menzionati dove ho ancora bisogno di inserire collegamenti CSS dall'intestazione ecc. Grazie!
— Jorz,
il modo in cui sei passato elè terribile, specialmente da quando hai usato jQ. Molto meglio semplicemente passare selectore sbarazzarsi del codice hard#
— RozzA
Ho sempre usato questo metodo oggi ho notato che non funziona correttamente sul dispositivo Android (Google Chrome). L'area stampabile della pagina cambia ogni volta e contiene alcune parti extra di el. Penso che il comando di stampa venga inviato quando il corpo viene ripristinato.
— Ali Sheikhpour,
18

Da qui http://forums.asp.net/t/1261525.aspx

<html>

<head>
    <script language="javascript">
        function printdiv(printpage) {
            var headstr = "<html><head><title></title></head><body>";
            var footstr = "</body>";
            var newstr = document.all.item(printpage).innerHTML;
            var oldstr = document.body.innerHTML;
            document.body.innerHTML = headstr + newstr + footstr;
            window.print();
            document.body.innerHTML = oldstr;
            return false;
        }
    </script>
    <title>div print</title>
</head>

<body>
    //HTML Page //Other content you wouldn't like to print
    <input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">

    <div id="div_print">

        <h1 style="Color:Red">The Div content which you want to print</h1>

    </div>
    //Other content you wouldn't like to print //Other content you wouldn't like to print
</body>

</html>
— huston007
fonte
1
è necessaria una modifica per dividere footerStr in 2 parti. perché brwoser utilizza "</body>" come fine principale della pagina corrente. var footstr1 = "</"; var footstr2 = "body>"; var footerstr = footstr1 + footstr12;
— mirzaei,
13

ho usato la Bill Paetzkerisposta per stampare un div contenente immagini ma non ha funzionato con Google Chrome

ho solo bisogno di aggiungere questa linea myWindow.onload=function(){per farlo funzionare ed ecco il codice completo

<html>
<head>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
    <script type="text/javascript">
        function PrintElem(elem) {
            Popup($(elem).html());
        }

        function Popup(data) {
            var myWindow = window.open('', 'my div', 'height=400,width=600');
            myWindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            myWindow.document.write('</head><body >');
            myWindow.document.write(data);
            myWindow.document.write('</body></html>');
            myWindow.document.close(); // necessary for IE >= 10

            myWindow.onload=function(){ // necessary if the div contain images

                myWindow.focus(); // necessary for IE >= 10
                myWindow.print();
                myWindow.close();
            };
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This will be printed.
        <img src="image.jpg"/>
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherDiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintElem('#myDiv')" />
</body>
</html>

anche se qualcuno ha solo bisogno di stampare un div con id non ha bisogno di caricare jquery

ecco un codice javascript puro per farlo

<html>
<head>
    <script type="text/javascript">
        function PrintDiv(id) {
            var data=document.getElementById(id).innerHTML;
            var myWindow = window.open('', 'my div', 'height=400,width=600');
            myWindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            myWindow.document.write('</head><body >');
            myWindow.document.write(data);
            myWindow.document.write('</body></html>');
            myWindow.document.close(); // necessary for IE >= 10

            myWindow.onload=function(){ // necessary if the div contain images

                myWindow.focus(); // necessary for IE >= 10
                myWindow.print();
                myWindow.close();
            };
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This will be printed.
        <img src="image.jpg"/>
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherDiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintDiv('myDiv')" />
</body>
</html>

spero che questo possa aiutare qualcuno

— Roberto
fonte
Questo ha funzionato per me! La camelcase mi ha morso però poiché la risposta originale utilizza "mywindow" vs. "myWindow". Grazie!
— codice
12 
function printdiv(printdivname) {
    var headstr = "<html><head><title>Booking Details</title></head><body>";
    var footstr = "</body>";
    var newstr = document.getElementById(printdivname).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr+newstr+footstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
}

Questo stamperà l' divarea desiderata e ripristinerà il contenuto com'era. printdivnameè il divda stampare.

— techie
fonte
è necessaria una modifica per dividere footerStr in 2 parti. perché brwoser utilizza "</body>" come fine principale della pagina corrente. var footstr1 = "</"; var footstr2 = "body>"; var footerstr = footstr1 + footstr12;
— mirzaei,
È geniale! Ma sì, hai bisogno dell'hack di mirzaei, altrimenti perché il tag body si rompe e la formattazione si interrompe. Con l'hack, funziona alla grande! Puoi anche aggiungere il tuo involucro interno per facilitare stili di stampa speciali. Questa dovrebbe essere la risposta accettata.
— user2662680
9

Crea un foglio di stile di stampa separato che nasconda tutti gli altri elementi tranne il contenuto che desideri stampare. Contrassegnalo usando 'media="print"quando lo carichi:

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

Ciò consente di caricare un foglio di stile completamente diverso per le stampe.

Se si desidera forzare la visualizzazione della finestra di dialogo di stampa del browser per la pagina, è possibile farlo in questo modo al caricamento utilizzando JQuery:

$(function() { window.print(); });

o attivato da qualsiasi altro evento desiderato, ad esempio un utente che fa clic su un pulsante.

— Carl Russmann
fonte
2
Sì, funzionerebbe anche questo; è difficile - beh, impossibile - sapere esattamente quale sia lo scenario.
— Punta a punta,
Sono d'accordo che un CSS separato sia la soluzione ideale. E copiare il contenuto del div in una nuova finestra è una soluzione rapida.
— Bill Paetzke,
9

Penso che le soluzioni proposte finora presentino i seguenti inconvenienti:

  1. Le soluzioni di query multimediali CSS presuppongono che vi sia un solo div da stampare.
  2. Le soluzioni javascript funzionano solo su alcuni browser.
  3. Distruggere il contenuto della finestra principale e ricrearlo crea disordine.

Ho migliorato le soluzioni sopra. Ecco qualcosa che ho testato che funziona davvero bene con i seguenti vantaggi.

  1. Funziona su tutti i browser inclusi IE, Chrome, Safari e firefox.
  2. Non distrugge e ricarica la finestra principale.
  3. Può stampare un numero qualsiasi di DIV in una pagina.
  4. Utilizza modelli html per evitare la concatenazione di stringhe soggette a errori.

Punti chiave da notare:

  1. Devi avere un onload = "window.print ()" nella finestra appena creata.
  2. Non chiamare targetwindow.close () o targetwindow.print () dal genitore.
  3. Assicurati di fare targetwindow.document.close () e target.focus ()
  4. Sto usando jquery ma puoi fare la stessa tecnica anche usando javascript semplice.
  5. Puoi vederlo in azione qui http://math.tools/table/multiplication . È possibile stampare ogni tabella separatamente, facendo clic sul pulsante Stampa nell'intestazione della casella.

<script id="print-header" type="text/x-jquery-tmpl">
   <html>
   <header>
       <title>Printing Para {num}</title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
       <style>
          body {
            max-width: 300px;
          }
       </style>
   </header>
   <body onload="window.print()">
   <h2>Printing Para {num} </h2>
   <h4>http://math.tools</h4>
</script>
<script id="print-footer" type="text/x-jquery-tmpl">
    </body>
    </html>
</script>
<script>
$('.printthis').click(function() {
   num = $(this).attr("data-id");
   w = window.open();
   w.document.write(
                   $("#print-header").html().replace("{num}",num)  +
                   $("#para-" + num).html() +
                   $("#print-footer").html() 
                   );
   w.document.close();
   w.focus();
   //w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window.
   ///w.close(); Don't do this otherwise chrome won't work
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a>
<a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a>
  
<p class="para" id="para-1">
  Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  

<p class="para" id="para-2">
  Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Espandi frammento

— dors
fonte
Questo è stato eccellente e ha funzionato su più browser molto meglio dei risultati accettati!
— dama_do_bling,
7

Ho creato un plugin per affrontare questo scenario. Non ero soddisfatto dei plugin là fuori e ho deciso di rendere qualcosa di più ampio / configurabile.

https://github.com/jasonday/printThis

— Jason
fonte
1
Grazie mille per il tuo duro lavoro Jason ..... !! Utilizzerò davvero nei miei altri progetti. Che
6

La soluzione accettata non funzionava. Chrome stava stampando una pagina vuota perché non stava caricando l'immagine in tempo. Questo approccio funziona:

Modifica: sembra che la soluzione accettata sia stata modificata dopo il mio post. Perché il downvote? Anche questa soluzione funziona.

    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;
    }
— live-love
fonte
4

So che questa è una vecchia domanda, ma ho risolto questo problema con jQuery. 

function printContents(id) {
    var contents = $("#"+id).html();

    if ($("#printDiv").length == 0) {
      var printDiv = null;
      printDiv = document.createElement('div');
      printDiv.setAttribute('id','printDiv');
      printDiv.setAttribute('class','printable');
      $(printDiv).appendTo('body');
    }

    $("#printDiv").html(contents);

    window.print();

    $("#printDiv").remove();
}

CSS

  @media print {
    .non-printable, .fancybox-outer { display: none; }
    .printable, #printDiv { 
        display: block; 
        font-size: 26pt;
    }
  }
— jazzistico
fonte
3

Sebbene la risposta di @BC sia stata la migliore per stampare una singola pagina.

Ma per stampare più pagine di formato A4 contemporaneamente con ctrl + P può essere utile la seguente soluzione. 

@media print{
html *{
    height:0px!important;
    width:0px !important;
    margin: 0px !important;
    padding: 0px !important;
    min-height: 0px !important;
    line-height: 0px !important;
    overflow: visible !important;
    visibility: hidden ;


}


/*assing myPagesClass to every div you want to print on single separate A4 page*/

 body .myPagesClass {
    z-index: 100 !important;
    visibility: visible !important;
    position: relative !important;
    display: block !important;
    background-color: lightgray !important;
    height: 297mm !important;
    width: 211mm !important;
    position: relative !important;

    padding: 0px;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    orphans: 0!important;
    widows: 0!important;
    overflow: visible !important;
    page-break-after: always;

}
@page{
    size: A4;
    margin: 0mm ;
    orphans: 0!important;
    widows: 0!important;
}}
— arslan
fonte
2
  • Apri una nuova finestra
  • Apri l'oggetto documento della nuova finestra e scrivi in ​​esso un semplice documento contenente nient'altro che il div che hai e l'intestazione html necessaria ecc. - Potresti anche voler avere il documento in un foglio di stile, a seconda del contenuto è
  • Inserisci uno script nella nuova pagina per chiamare window.print ()
  • Attiva lo script
— pointy
fonte
2

Ecco il mio plugin di stampa jquery

(function ($) {

$.fn.printme = function () {
    return this.each(function () {
        var container = $(this);

        var hidden_IFrame = $('<iframe></iframe>').attr({
            width: '1px',
            height: '1px',
            display: 'none'
        }).appendTo(container);

        var myIframe = hidden_IFrame.get(0);

        var script_tag = myIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        script = myIframe.contentWindow.document.createTextNode('function Print(){ window.print(); }');
        script_tag.appendChild(script);

        myIframe.contentWindow.document.body.innerHTML = container.html();
        myIframe.contentWindow.document.body.appendChild(script_tag);

        myIframe.contentWindow.Print();
        hidden_IFrame.remove();

    });
};
})(jQuery);
— karaxuna
fonte
2

Se si desidera avere tutti gli stili dal documento originale (inclusi gli stili incorporati) è possibile utilizzare questo approccio.

  1. Copia il documento completo
  2. Sostituisci il corpo con l'elemento che desideri stampare.

Implementazione:

class PrintUtil {
  static printDiv(elementId) {
    let printElement = document.getElementById(elementId);
    var printWindow = window.open('', 'PRINT');
    printWindow.document.write(document.documentElement.innerHTML);
    setTimeout(() => { // Needed for large documents
      printWindow.document.body.style.margin = '0 0';
      printWindow.document.body.innerHTML = printElement.outerHTML;
      printWindow.document.close(); // necessary for IE >= 10
      printWindow.focus(); // necessary for IE >= 10*/
      printWindow.print();
      printWindow.close();
    }, 1000)
  }   
}
— Stefan Norberg
fonte
2
Non so che questa sia la soluzione migliore, ma ha funzionato perfettamente. Grazie!
— BRogers,
2

Nota: funziona solo con siti abilitati per jQuery

È molto semplice con questo fantastico trucco. Ha funzionato per me nel browser Google Chrome . Firefox non ti consentirà di stampare in PDF senza un plug-in.

  1. Innanzitutto, apri l'ispettore utilizzando (Ctrl + Maiusc + I) / (Cmd + Opzione + I).
  2. Digita questo codice nella console:
var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours
  1. Avvia la finestra di stampa. Prendi una stampa fisica o salvala in PDF (in chrome). Fatto!

La logica è semplice Stiamo creando un nuovo tag script e lo alleghiamo prima della chiusura del tag body. Abbiamo iniettato un'estensione di stampa jQuery nell'HTML. Cambia myDivWithStyles con il tuo ID tag Div. Ora si prende cura di preparare una finestra virtuale stampabile.

Provalo su qualsiasi sito. Solo un avvertimento è talvolta scritto in modo complicato CSS può causare la mancanza di stili. Ma riceviamo il contenuto il più delle volte.

— Naren Yellavula
fonte
1

In Opera, prova:

    print_win.document.write('</body></html>');
    print_win.document.close(); // This bit is important
    print_win.print();
    print_win.close();
— mirk
fonte
1

Ecco una soluzione IFrame che funziona per IE e Chrome:

function printHTML(htmlString) {
    var newIframe = document.createElement('iframe');
    newIframe.width = '1px';
    newIframe.height = '1px';
    newIframe.src = 'about:blank';

    // for IE wait for the IFrame to load so we can access contentWindow.document.body
    newIframe.onload = function() {
        var script_tag = newIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
        script_tag.appendChild(script);

        newIframe.contentWindow.document.body.innerHTML = htmlString;
        newIframe.contentWindow.document.body.appendChild(script_tag);

        // for chrome, a timeout for loading large amounts of content
        setTimeout(function() {
            newIframe.contentWindow.Print();
            newIframe.contentWindow.document.body.removeChild(script_tag);
            newIframe.parentElement.removeChild(newIframe);
        }, 200);
    };
    document.body.appendChild(newIframe);
}
— kofifus
fonte
1

Creato qualcosa di generico da utilizzare su qualsiasi elemento HTML 

HTMLElement.prototype.printMe = printMe;
function printMe(query){             
     var myframe = document.createElement('IFRAME');
     myframe.domain = document.domain;
     myframe.style.position = "absolute";
     myframe.style.top = "-10000px";
     document.body.appendChild(myframe);
     myframe.contentDocument.write(this.innerHTML) ;
     setTimeout(function(){
        myframe.focus();
        myframe.contentWindow.print();
        myframe.parentNode.removeChild(myframe) ;// remove frame
     },3000); // wait for images to load inside iframe
     window.focus();
}
//usage
document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();

Spero che questo ti aiuti.

— Gaurav
fonte
1

Ho modificato la risposta di @BillPaetski per utilizzare querySelector, aggiungere CSS opzionale, rimuovere il tag H1 forzato e rendere il titolo facoltativamente specificato o estratto dalla finestra. Inoltre, non stampa più automaticamente ed espone gli interni in modo che possano essere disattivati ​​nella funzione wrapper o come preferisci.

Le uniche due varianti private sono tmpWindow e tmpDoc anche se credo che l'accesso a titolo, css ed elem possa variare, si dovrebbe presumere che tutti gli argomenti della funzione siano privati.

Codice: 
function PrintElem(elem, title, css) {
    var tmpWindow = window.open('', 'PRINT', 'height=400,width=600');
    var tmpDoc = tmpWindow.document;

    title = title || document.title;
    css = css || "";

    this.setTitle = function(newTitle) {
        title = newTitle || document.title;
    };

    this.setCSS = function(newCSS) {
        css = newCSS || "";
    };

    this.basicHtml5 = function(innerHTML) {
        return '<!doctype html><html>'+(innerHTML || "")+'</html>';
    };

    this.htmlHead = function(innerHTML) {
        return '<head>'+(innerHTML || "")+'</head>';
    };

    this.htmlTitle = function(title) {
        return '<title>'+(title || "")+'</title>';
    };

    this.styleTag = function(innerHTML) {
        return '<style>'+(innerHTML || "")+'</style>';
    };

    this.htmlBody = function(innerHTML) {
        return '<body>'+(innerHTML || "")+'</body>';
    };

    this.build = function() {
        tmpDoc.write(
            this.basicHtml5(
                this.htmlHead(
                    this.htmlTitle(title) + this.styleTag(css)
                ) + this.htmlBody(
                    document.querySelector(elem).innerHTML
                )
            )
        );
        tmpDoc.close(); // necessary for IE >= 10
    };

    this.print = function() {
        tmpWindow.focus(); // necessary for IE >= 10*/
        tmpWindow.print();
        tmpWindow.close();
    };

    this.build();
    return this;
}
Uso: 
DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();
— MrMesees
fonte
Inoltre, non copia i valori degli <input>elementi. Come posso utilizzarlo incluso ciò che l'utente ha digitato?
— Malcolm Salvador,
@ Malky.Kid, per favore, pensa a cosa stai chiedendo. Se si desidera stampare un modulo, è necessario collegare sfocatura eventi su elementi del modulo, e impostare il valore di attributo, selezionato, di default e innerText di <input>, <select>, <textarea>compontents di essere il loro valore di runtime. Esistono alternative, ma non è un problema con questo script, ma un problema con il funzionamento dei browser e con la innerHTMLproprietà dei documenti con input, canvas, ecc.
— MrMesees
Sono già arrivato a una soluzione tramite .attr('value',). L'ho anche fatto per textarea (aggiungendo) e caselle di controllo ( .attr('checked',)). Mi dispiace se non stavo pensando abbastanza a quello che stavo chiedendo.
— Malcolm Salvador,
Vuoi condividere con la classe? forse un succo o qualcosa nei commenti. Lo voterò.
— MrMesees,
0

Il codice seguente copia tutti i nodi rilevanti presi di mira dal selettore di query, copia sui loro stili come visualizzato sullo schermo, poiché mancheranno molti elementi padre utilizzati per il targeting dei selettori CSS. Questo provoca un po 'di ritardo se ci sono molti nodi figlio con molti stili.

Idealmente, avresti pronto un foglio di stile di stampa, ma questo è per i casi di utilizzo in cui non è necessario inserire un foglio di stile di stampa e desideri stampare come visualizzato sullo schermo.

Se copi gli elementi seguenti nella console del browser in questa pagina, verranno stampati tutti gli snippet di codice in questa pagina.

+function() {
    /**
     * copied from  /programming/19784064/set-javascript-computed-style-from-one-element-to-another
     * @author Adi Darachi https://stackoverflow.com/users/2318881/adi-darachi
     */
    var copyComputedStyle = function(from,to){
        var computed_style_object = false;
        //trying to figure out which style object we need to use depense on the browser support
        //so we try until we have one
        computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);

        //if the browser dose not support both methods we will return null
        if(!computed_style_object) return null;

            var stylePropertyValid = function(name,value){
                        //checking that the value is not a undefined
                return typeof value !== 'undefined' &&
                        //checking that the value is not a object
                        typeof value !== 'object' &&
                        //checking that the value is not a function
                        typeof value !== 'function' &&
                        //checking that we dosent have empty string
                        value.length > 0 &&
                        //checking that the property is not int index ( happens on some browser
                        value != parseInt(value)

            };

        //we iterating the computed style object and compy the style props and the values
        for(property in computed_style_object)
        {
            //checking if the property and value we get are valid sinse browser have different implementations
                if(stylePropertyValid(property,computed_style_object[property]))
                {
                    //applying the style property to the target element
                        to.style[property] = computed_style_object[property];

                }   
        }   

    };


    // Copy over all relevant styles to preserve styling, work the way down the children tree.
    var buildChild = function(masterList, childList) {
        for(c=0; c<masterList.length; c++) {
           var master = masterList[c];
           var child = childList[c];
           copyComputedStyle(master, child);
           if(master.children && master.children.length > 0) {
               buildChild(master.children, child.children);
           }
        }
    }

    /** select elements to print with query selector **/
    var printSelection = function(querySelector) {
        // Create an iframe to make sure everything is clean and ordered.
        var iframe = document.createElement('iframe');
        // Give it enough dimension so you can visually check when modifying.
        iframe.width = document.width;
        iframe.height = document.height;
        // Add it to the current document to be sure it has the internal objects set up.
        document.body.append(iframe);

        var nodes = document.querySelectorAll(querySelector);
        if(!nodes || nodes.length == 0) {
           console.error('Printing Faillure: Nothing to print. Please check your querySelector');
           return;
        }

        for(i=0; i < nodes.length; i++) {

            // Get the node you wish to print.
            var origNode = nodes[i];

            // Clone it and all it's children
            var node = origNode.cloneNode(true);

            // Copy the base style.
            copyComputedStyle(origNode, node);

            if(origNode.children && origNode.children.length > 0) {
                buildChild(origNode.children, node.children);
            }

            // Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.

            iframe.contentWindow.document.body.append(node);
        }
        // Print the window
        iframe.contentWindow.print();

        // Give the browser a second to gather the data then remove the iframe.
        window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
    }
window.printSelection = printSelection;
}();
printSelection('.default.prettyprint.prettyprinted')
— Tschallacka
fonte
0

Questo è davvero un vecchio post, ma qui è un mio aggiornamento quello che ho fatto usando la risposta corretta. La mia soluzione usa anche jQuery.

Il punto è utilizzare la visualizzazione di stampa corretta, includere tutti i fogli di stile per la formattazione corretta e anche essere supportati nella maggior parte dei browser.

function PrintElem(elem, title, offset)
{
    // Title constructor
    title = title || $('title').text();
    // Offset for the print
    offset = offset || 0;

    // Loading start
    var dStart = Math.round(new Date().getTime()/1000),
        $html = $('html');
        i = 0;

    // Start building HTML
    var HTML = '<html';

    if(typeof ($html.attr('lang')) !== 'undefined') {
        HTML+=' lang=' + $html.attr('lang');
    }

    if(typeof ($html.attr('id')) !== 'undefined') {
        HTML+=' id=' + $html.attr('id');
    }

    if(typeof ($html.attr('xmlns')) !== 'undefined') {
        HTML+=' xmlns=' + $html.attr('xmlns');
    }

    // Close HTML and start build HEAD
    HTML+='><head>';

    // Get all meta tags
    $('head > meta').each(function(){
        var $this = $(this),
            $meta = '<meta';

        if(typeof ($this.attr('charset')) !== 'undefined') {
            $meta+=' charset=' + $this.attr('charset');
        }

        if(typeof ($this.attr('name')) !== 'undefined') {
            $meta+=' name=' + $this.attr('name');
        }

        if(typeof ($this.attr('http-equiv')) !== 'undefined') {
            $meta+=' http-equiv=' + $this.attr('http-equiv');
        }

        if(typeof ($this.attr('content')) !== 'undefined') {
            $meta+=' content=' + $this.attr('content');
        }

        $meta+=' />';

        HTML+= $meta;
        i++;

    }).promise().done(function(){

        // Insert title
        HTML+= '<title>' + title  + '</title>';

        // Let's pickup all CSS files for the formatting
        $('head > link[rel="stylesheet"]').each(function(){
            HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
            i++;
        }).promise().done(function(){
            // Print setup
            HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';

            // Finish HTML
            HTML+= '</head><body>';
            HTML+= '<h1 class="text-center mb-3">' + title  + '</h1>';
            HTML+= elem.html();
            HTML+= '</body></html>';

            // Open new window
            var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
            // Append new window HTML
            printWindow.document.write(HTML);

            printWindow.document.close(); // necessary for IE >= 10
            printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
            /* Make sure that page is loaded correctly */
            $(printWindow).on('load', function(){                   
                setTimeout(function(){
                    // Open print
                    printWindow.print();

                    // Close on print
                    setTimeout(function(){
                        printWindow.close();
                        return true;
                    }, 3);

                }, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
            });
        });
    });
}

Più tardi hai semplicemente bisogno di qualcosa del genere:

$(document).on('click', '.some-print', function() {
    PrintElem($(this), 'My Print Title');
    return false;
});

Provalo.

— Ivijan Stefan Stipić
fonte
-1

Stessa risposta migliore, nel caso in cui sia necessario stampare l'immagine come ho fatto io:

Nel caso in cui si desideri stampare l'immagine:

function printElem(elem)
    {
        Popup(jQuery(elem).attr('src'));
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        mywindow.document.write('</head><body >');
        mywindow.document.write('<img src="'+data+'" />');
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }
— Goran Jakovljevic
fonte
Manca un loadevento nel popup. Senza di essa, si stampa una pagina vuota poiché l'immagine non è caricata. =>$(popup).load(function(){ popup.focus(); popup.print(); });
— Tim Vermaelen,
-4

Il modo migliore per farlo sarebbe quello di inviare il contenuto del div al server e aprire una nuova finestra in cui il server potrebbe inserire tali contenuti nella nuova finestra.

Se questa non è un'opzione, puoi provare a utilizzare un linguaggio lato client come javascript per nascondere tutto sulla pagina tranne quella div e quindi stampare la pagina ...

— Sonny Boy
fonte
1
Non è necessario rimandarlo al server. È possibile aprire una finestra del browser e impostare il contenuto e richiamare il comando di stampa.
— Jonathon Faust,
È possibile creare una nuova finestra dal client.
— Punta a punta,
1
Jonathon: Mi piace quella soluzione. Hai qualche codice di esempio?
— aggressivo,
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.