Drucken Sie einen Div-Inhalt mit Jquery

Ich möchte den Inhalt eines Div mit jQuery drucken. Diese Frage wird bereits in SO gestellt, aber ich kann die richtige (funktionierende) Antwort nicht finden.Drucken Sie einen Div-Inhalt mit Jquery

Dies ist mein 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>

Hier möchte ich printarea den Inhalt des div drucken.

Ich versuchte dies:

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

Aber es gibt eine Konsole Fehler, wenn die Schaltfläche geklickt wird:

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

Aber wenn ich versuche, die gesamte Seite

window.print();

mit gedruckt

es funktioniert. Aber ich möchte nur den Inhalt eines bestimmten div drucken. Ich sah die Antwort $("#printarea").print(); an vielen Stellen, aber das funktioniert nicht.

Quelle

2015-11-16 next2u

Sie könnten Setup ein Stylesheet mit 'media = "print"' darauf, dass alle nicht-relevanten Inhalten verbirgt. –

Sie suchen hier tatsächlich eine CSS-Lösung, [diese] (http://stackoverflow.com/questions/7440976/how-to-print-a-part-of-my-page-using-jquery) ist eine einfache Einrichtung für Ihren Zweck - es verbirgt alle Seitenelemente mit Ausnahme der mit der Klasse '.printable' – SidOfc

Die Verwendung des JavaScript-Tags könnte eine gute Idee sein, wenn Sie gute Antworten gewinnen wollen: http://meta.stackoverflow.com/ Fragen/290244/suggest-edits-do-questions-need-javascript-and-jquery-tags – Anders

Einige jQuery-Recherchen sind fehlgeschlagen, deshalb habe ich JavaScript übernommen (Danke für Ihren Vorschlag Anders).

Und es funktioniert gut ...

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

}

Quelle

2015-11-16 12:28:15 next2u

Sie verlieren CSS/JS/Fonts –

Sie sollten dies nicht verwenden, weil Sie nach der Verwendung dieses JS verloren gehen. wie $ (". class"). click() und $ (". class"). change und andere Ereignisse. –

auch manchmal Server-Timeout ohne Anzeige des Druckfensters. –

https://github.com/jasonday/printThis

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

Große jQuery-Plugin genau das zu tun, was Ihr nach

Quelle

2015-11-16 10:11:40 CiaranSynnott

einen Blick auf dieses Plugin

macht den Code so einfach wie ->$('SelectorToPrint').printElement();

Quelle

2015-11-16 10:12:08 ahervin

Ohne Mit jedem Plugin können Sie diese Logik wählen.

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

Quelle

2015-11-16 10:14:03

Druckt alles auf der Seite auf Mozila firefox – zeddarn

Wenn Sie dies ohne ein zusätzliches Plugin (wie printThis) tun wollen, ich denke, das sollte funktionieren. Die Idee ist, ein spezielles div zu haben, das gedruckt wird, während alles andere mit CSS versteckt ist. Dies ist einfacher zu tun, wenn das div ein direktes Kind des body -Tags ist, also müssen Sie alles, was Sie drucken möchten, in ein div wie dieses verschieben. S Beginnen Sie also damit, ein div mit der ID print-me als direktes Kind für Ihr Body-Tag zu erstellen. Dann diesen Code verwenden, um die div zu drucken:

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

Die Stile, die Sie benötigen, sind diese:

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

Der Grund, warum wir nur die @print Stile anwenden sollte, wenn die printing Klasse vorhanden ist, ist, dass die Seite sollte normal gedruckt werden, wenn der Benutzer die Seite druckt, indem er File -> Print auswählt.

Quelle

2015-11-16 10:30:29 Anders

ich die hier Plugin nicht-Ansätze alle ausprobiert, aber alle verursachten leere Seiten nach dem Inhalt, oder hatten andere Probleme zu drucken. Hier ist meine Lösung:

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

Quelle

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

Quelle

2017-03-27 08:04:40 Denis

Wie ändere ich das in Landschaft? – Gagantous

Keine der oben genannten Lösungen Arbeit perfectly.They entweder verliert CSS oder schließen müssen/externe CSS-Datei zu bearbeiten. Ich habe eine perfekte Lösung gefunden, die Ihr CSS nicht verliert, oder Sie müssen externes CSS bearbeiten/hinzufügen.

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

Quelle

2017-11-09 15:34:12 BibanCS

Antwort

Verwandte Themen