Stampa un contenuto div usando Jquery

Voglio stampare il contenuto di un div usando jQuery. Questa domanda è già stata posta in SO, ma non riesco a trovare la risposta corretta (funzionante).Stampa un contenuto div usando Jquery

Questo è è il mio HTML:

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

Qui voglio stampare il contenuto del div printarea.

ho provato questo:

$("#btn").click(function() { 
    $("#printarea").print(); 
});

ma dà un errore di console quando viene cliccato il pulsante:

Uncaught TypeError: $(...).print is not a function

Ma quando sto cercando di stampare la pagina intera utilizzando

window.print();

funziona. Ma voglio solo stampare il contenuto di un particolare div. Ho visto la risposta $("#printarea").print(); in molti posti, ma questo non funziona.

fonte

2015-11-16 next2u

Potreste installare un foglio di stile con 'dei media = "print"' su di esso che nasconde tutti i contenuti non pertinenti. –

Stai cercando una soluzione CSS qui in realtà, [questo] (http://stackoverflow.com/questions/7440976/how-to-print-a-part-of-my-page-using-jquery) è un facile impostazione per il tuo scopo - nasconde tutti gli elementi della pagina tranne quelli con la classe '.printable' – SidOfc

L'uso del tag JavaScript potrebbe essere una buona idea se vuoi attirare buone risposte: http://meta.stackoverflow.com/ domande/290244/suggerito-edits-do-questions-need-both-javascript-and-jquery-tag – Anders

Alcune ricerche di jQuery non sono riuscite, quindi mi sono spostato su JavaScript (grazie per il tuo suggerimento Anders).

E funziona bene ...

HTML

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

JavaScript

function printDiv() 
{ 

    var divToPrint=document.getElementById('DivIdToPrint'); 

    var newWin=window.open('','Print-Window'); 

    newWin.document.open(); 

    newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); 

    newWin.document.close(); 

    setTimeout(function(){newWin.close();},10); 

}

fonte

2015-11-16 12:28:15 next2u

Hai perso CSS/JS/Fonts –

Non dovresti usarlo perché dopo averlo usato hai perso il tuo JS. come $ (". class"). click() e $ (". class"). change e altri eventi. –

talvolta anche il timeout del server senza mostrare la finestra di stampa. –

https://github.com/jasonday/printThis

$("#myID").printThis();

ottimo plugin jQuery per fare esattamente ciò che il vostro dopo

fonte

2015-11-16 10:11:40 CiaranSynnott

Date un'occhiata a questo Plugin

rende il codice più semplice ->$('SelectorToPrint').printElement();

fonte

2015-11-16 10:12:08 ahervin

Senza usando qualsiasi plugin puoi optare per questa logica.

$("#btn").click(function() { 
    //Hide all other elements other than printarea. 
    $("#printarea").show(); 
    window.print(); 
});

fonte

2015-11-16 10:14:03

Stampa tutto nella pagina su Mozila firefox – zeddarn

Se si vuole fare questo senza un plug-in aggiuntivo (come printThis), credo che questo dovrebbe funzionare. L'idea è di avere un div speciale che verrà stampato, mentre tutto il resto è nascosto usando i CSS. Questo è più facile da fare se il div è un figlio diretto del tag body, quindi dovrai spostare ciò che vuoi stampare su un div in questo modo. S Quindi inizia con la creazione di un div con ID print-me come figlio diretto del tuo tag body. Quindi utilizzare questo codice per stampare il div:

$("#btn").click(function() { 
    //Copy the element you want to print to the print-me div. 
    $("#printarea").clone().appendTo("#print-me"); 
    //Apply some styles to hide everything else while printing. 
    $("body").addClass("printing"); 
    //Print the window. 
    window.print(); 
    //Restore the styles. 
    $("body").removeClass("printing"); 
    //Clear up the div. 
    $("#print-me").empty(); 
});

Gli stili ciò che serve sono questi:

@media print { 
    /* Hide everything in the body when printing... */ 
    body.printing * { display: none; } 
    /* ...except our special div. */ 
    body.printing #print-me { display: block; } 
} 

@media screen { 
    /* Hide the special layer from the screen. */ 
    #print-me { display: none; } 
}

Il motivo per cui dovrebbe applicarsi solo gli stili @print quando la classe printing è presente è che la pagina dovrebbe essere stampato normalmente se l'utente stampa la pagina selezionando File -> Print.

fonte

2015-11-16 10:30:29 Anders

Ho provato tutti gli approcci non-plug qui, ma tutti causati pagine vuote per la stampa dopo che il contenuto, o ha avuto altri problemi. Ecco la mia soluzione:

Html:

<body> 
<div id="page-content">   
    <div id="printme">Content To Print</div> 
    <div>Don't print this.</div> 
</div> 
<div id="hidden-print-div"></div> 
</body>

Jquery:

$(document).ready(function() { 
     $("#hidden-print-div").html($("#printme").html()); 
    });

Css:

#hidden-print-div { 
     display: none; 
    } 

    @media print { 
     #hidden-print-div { 
      display: block; 
     } 

     #page-content { 
      display: none; 
     } 
    }

fonte

2017-02-13 22:02:21

Print only selected element on codepen

HTML:

<div class="print"> 
<p>Print 1</p> 
<a href="#" class="js-print-link">Click Me To Print</a> 
</div> 

<div class="print"> 
<p>Print 2</p> 
<a href="#" class="js-print-link">Click Me To Print</a> 
</div>

JQuery:

$('.js-print-link').on('click', function() { 
    var printBlock = $(this).parents('.print').siblings('.print'); 
    printBlock.hide(); 
    window.print(); 
    printBlock.show(); 
});

fonte

2017-03-27 08:04:40 Denis

come posso cambiarlo in orizzontale? – Gagantous

Nessuna delle soluzioni di cui sopra lavoro perfectly.They o perde CSS o devono includere/modificare file CSS esterno. Ho trovato una soluzione perfetta che non perderà il tuo CSS né devi modificare/aggiungere CSS esterno.

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

JQuery:

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(); 
    }

fonte

2017-11-09 15:34:12 BibanCS

Stampa un contenuto div usando Jquery

risposta

Problemi correlati