Come posso stampare parte di una pagina HTML resa in JavaScript?

Il codice JavaScript window.print () può stampare la pagina HTML corrente.

Se ho un div in una pagina HTML (per esempio, una pagina resa da una vista ASP.NET MVC ), allora voglio stampare solo div.

C’è jQuery JavaScript non invadente o codice JavaScript normale per implementare questa richiesta?

Per renderlo più chiaro, supponiamo che la pagina HTML renderizzata sia simile a:

       
....
....
....
....
....

Quindi voglio fare clic sul pulsante Stampa, stampando solo div3.

Ci andrei un po ‘in questo modo:

   Print Test Page    

This is a test page for printing

Div 1: Print
This is the div1's print output


Div 2: Print
This is the div2's print output


Div 3: Print
This is the div3's print output

Sulla stessa falsariga di alcuni dei suggerimenti che dovresti fare almeno quanto segue:

  • Carica alcuni CSS in modo dinamico tramite JavaScript
  • Crea alcune regole CSS specifiche per la stampa
  • Applica le tue fantasiose regole CSS tramite JavaScript

Un esempio di CSS potrebbe essere semplice come questo:

 @media print { body * { display:none; } body .printable { display:block; } } 

Il tuo JavaScript dovrebbe quindi solo applicare la class “stampabile” al tuo target div e sarà l’unica cosa visibile (a patto che non ci siano altre regole CSS in conflitto – un esercizio separato) quando la stampa avviene.

  

È ansible rimuovere facoltativamente la class dalla destinazione dopo che si è verificata la stampa e / o rimuovere il CSS aggiunto in modo dinamico dopo che si è verificata la stampa.

Di seguito è riportato un esempio operativo completo, l’unica differenza è che il CSS di stampa non viene caricato in modo dinamico. Se vuoi che sia davvero discreto, dovrai caricare il CSS dynamicmente come in questa risposta .

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    Print Portion Example     

Print Section Example

Div 1
Div 2
Div 3
Div 4
Div 5
Div 6

Prova questo codice JavaScript:

 function printout() { var newWindow = window.open(); newWindow.document.write(document.getElementById("output").innerHTML); newWindow.print(); } 
 
...Your html Page content here....

Per printThis.js, souce code, copy and pase below URL nella nuova scheda https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js

È ansible utilizzare un foglio di stile di stampa, ma questo avrà effetto su tutte le funzioni di stampa.

Potresti provare a stampare un foglio di stile esternamente, ed è incluso tramite JavaScript quando viene premuto un pulsante, quindi chiamare window.print() , quindi rimuoverlo.