it-swarm.com.de

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.

Das 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 den Inhalt der div printarea ausdrucken. 

Ich habe das versucht:

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

Es wird jedoch ein Konsolenfehler angezeigt, wenn auf die Schaltfläche geklickt wird:

Nicht abgerufener TypeError: $ (...). Print ist keine Funktion

Aber wenn ich versuche, die gesamte Seite mit zu drucken

window.print();

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

28

Einige Recherchen von jQuery sind fehlgeschlagen, also bin ich zu JavaScript gewechselt (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);

}
53

https://github.com/jasonday/printThis

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

Tolles Jquery-Plugin, um genau das zu tun, was Sie wollen

25
CiaranSynnott

Ohne Plugins können Sie diese Logik wählen.

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

Wenn Sie dies ohne zusätzliches Plugin (wie printThis ) tun möchten, sollte dies meiner Meinung nach funktionieren. Die Idee ist, ein spezielles div zu haben, das gedruckt wird, während alles andere mit CSS verborgen wird. Dies ist einfacher, wenn das div ein direktes untergeordnetes Element des body-Tags ist. Daher müssen Sie das, was Sie drucken möchten, in ein solches div verschieben. S Beginnen Sie also mit der Erstellung eines div mit der ID print-me als direktem Kind zu Ihrem Body-Tag. Verwenden Sie dann diesen Code, um das 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 brauchen, 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 die @print-Stile nur anwenden sollten, wenn die printing-Klasse vorhanden ist, ist der normale Ausdruck der Seite, wenn der Benutzer die Seite durch Auswahl von File -> Print druckt.

7
Anders

verwenden Sie diese Bibliothek: Print.JS

mit dieser Bibliothek können Sie sowohl HTML als auch PDF drucken.

<form method="post" action="#" id="printJS-form">
    ...
 </form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>
4
Naveed Ahmed

Keine der oben genannten Lösungen funktioniert einwandfrei. Sie verlieren entweder CSS oder müssen externe CSS-Dateien einschließen/bearbeiten. Ich habe eine perfekte Lösung gefunden, die Ihr CSS nicht verliert und Sie müssen kein externes CSS bearbeiten oder 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();
    }
3
BibanCS

Nur ausgewähltes Element auf Codepen drucken

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

Ich habe alle Nicht-Plugin-Ansätze hier ausprobiert, aber alle führten dazu, dass leere Seiten nach dem Inhalt gedruckt wurden, oder hatten andere Probleme. 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;
        }
    }
1
Timothy Kanski
<div id='printarea'>
    <p>This is a sample text for printing purpose.</p> 
</div>
<input type='button' id='btn' value='Print' onlick="printDiv()">
<p>Do not print.</p>

function printDiv(){
        var printContents = document.getElementById("printarea").innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}

Diese oben genannte Funktion sollte auf derselben Seite geladen werden.

1
Inventor Bala

Der folgende Code von Codepen funktionierte für mich, wie ich wollte,

function printData()
{
   var divToPrint=document.getElementById("printTable");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})

Hier ist ein Link codepen

1
Amarja

Schauen Sie sich das an Plugin

Macht Ihren Code so einfach wie -> $('SelectorToPrint').printElement();

1
ahervin

Ich aktualisiere diese Funktion
jetzt können Sie ein beliebiges Tag oder einen beliebigen Teil der Seite mit dem vollständigen Stil ausdrucken
muss die Datei jquery.js enthalten 

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='printtag("DivIdToPrint");' >

JavaScript

        function printtag(tagid) {
            var hashid = "#"+ tagid;
            var tagname =  $(hashid).prop("tagName").toLowerCase() ;
            var attributes = ""; 
            var attrs = document.getElementById(tagid).attributes;
              $.each(attrs,function(i,elem){
                attributes +=  " "+  elem.name+" ='"+elem.value+"' " ;
              })
            var divToPrint= $(hashid).html() ;
            var head = "<html><head>"+ $("head").html() + "</head>" ;
            var allcontent = head + "<body  onload='window.print()' >"+ "<" + tagname + attributes + ">" +  divToPrint + "</" + tagname + ">" +  "</body></html>"  ;
            var newWin=window.open('','Print-Window');
            newWin.document.open();
            newWin.document.write(allcontent);
            newWin.document.close();
           // setTimeout(function(){newWin.close();},10);
        }
0
Akram Elhaddad