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).

Questo è il mio HTML:

This is a sample text for printing purpose.

Do not print.

Qui voglio stampare il contenuto della div area di printarea .

Ho provato questo:

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

Ma dà un errore di console quando si fa clic sul pulsante:

Unrought TypeError: $ (…). Print non è una funzione

Ma quando sto provando a stampare l’intera pagina usando

 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.

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

E sta funzionando bene …

HTML

 

This is a sample text for printing purpose.

Do not print.

JavaScript

 function printDiv() { var divToPrint=document.getElementById('DivIdToPrint'); var newWin=window.open('','Print-Window'); newWin.document.open(); newWin.document.write(''+divToPrint.innerHTML+''); newWin.document.close(); setTimeout(function(){newWin.close();},10); } 

https://github.com/jasonday/printThis

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

Ottimo plugin Jquery per fare esattamente ciò che il tuo dopo

Senza utilizzare alcun plugin puoi optare per questa logica.

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

Se vuoi farlo senza un plugin aggiuntivo (come printThis ), penso che 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 di cui hai bisogno 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 dovremmo applicare gli stili @print solo quando la class di printing è presente è che la pagina debba essere stampata normalmente se l’utente stampa la pagina selezionando File -> Print .

usa questa libreria: Print.JS

con questa libreria puoi stampare sia HTML che PDF.

 
...

Nessuna delle soluzioni di cui sopra funziona perfettamente. Eliminano 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:

 

This is a sample text for printing purpose.

Do not print.

JQuery:

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

Dai un’occhiata a questo plugin

Rende il tuo codice facile come -> $('SelectorToPrint').printElement();

Ho provato tutti gli approcci non plug-in qui, ma tutti hanno causato la stampa di pagine vuote dopo il contenuto o altri problemi. Ecco la mia soluzione:

html:

  
Content To Print
Don't print this.

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

Stampa solo l’elemento selezionato su codepen

HTML:

   

JQuery:

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