it-swarm.com.de

Wie drucke ich HTML-Inhalte auf Knopfdruck, aber nicht die Seite?

Ich möchte HTML-Inhalte drucken, wenn der Benutzer auf eine Schaltfläche klickt. Sobald der Benutzer auf diese Schaltfläche klickt, wird der Druckdialog des Browsers geöffnet, die Webseite wird jedoch nicht gedruckt. Stattdessen wird der andere HTML-Inhalt gedruckt, der nicht auf der Seite angezeigt wird.

Wenn ich diese Frage stelle, fallen mir nur wenige Lösungen ein. Ich bin mir aber nicht sicher, ob dies gute Ideen sind oder ob etwas Besseres getan werden kann. Eine dieser Lösungen ist: Ich kann diesen HTML-Inhalt in einem div behalten und ihn zum Drucken display:, Aber display: none Zum Bildschirm machen. Alle anderen Elemente auf der Webseite können für den Druck auf display: none Und für den Bildschirm auf display: Gesetzt werden. Und dann anrufen, um zu drucken.

Irgendeine bessere Idee?

93
Debiprasad

Ich bin auf eine andere elegante Lösung gestoßen:

Platzieren Sie Ihr druckbares Teil in einem Div mit der folgenden ID:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

Jetzt erstellen wir ein wirklich einfaches Javascript:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

QUELLE: SO Antwort

135
asprin

Hier ist eine reine CSS-Version

.example-print {
    display: none;
}
@media print {
   .example-screen {
       display: none;
    }
    .example-print {
       display: block;
    }
}
<div class="example-screen">You only see me in the browser</div>

<div class="example-print">You only see me in the print</div>
86
2ne

Laut this SO link kannst du mit einen bestimmten div drucken

w=window.open();
w.document.write(document.getElementsByClassName('report_left_inner')[0].innerH‌​TML);
w.print();
w.close();
59
Jaay

Ich möchte das sehen

Beispiel http://jsfiddle.net/35vAN/

    <html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> 
<script type="text/javascript">

    function PrintElem(elem)
    {
        Popup($(elem).html());
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }

</script>
</head>
<body>

<div id="mydiv">
    This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
</div>

<div>
    This will not be printed.
</div>

<div id="anotherdiv">
    Nor will this.
</div>

<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />

</body>

</html>
10
Panchal Deep

Der folgende Code kann Ihnen helfen:

<html>
<head>
<script>
function printPage(id)
{
   var html="<html>";
   html+= document.getElementById(id).innerHTML;

   html+="</html>";

   var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status  =0');
   printWin.document.write(html);
   printWin.document.close();
   printWin.focus();
   printWin.print();
   printWin.close();
}
</script>
</head>
<body>
<div id="block1">
<table border="1" >
</tr>
<th colspan="3">Block 1</th>
</tr>
<tr>
<th>1</th><th>XYZ</th><th>athock</th>
</tr>
</table>

</div>

<div id="block2">
    This is Block 2 content
</div>

<input type="button" value="Print Block 1" onclick="printPage('block1');"></input>
<input type="button" value="Print Block 2" onclick="printPage('block2');"></input>
</body>
</html>
7
Butani Vijay

Wenn Sie innerHTML hinzufügen und entfernen, werden alle Javascript, CSS und mehr zweimal geladen, und die Ereignisse werden zweimal ausgelöst (passiert mir). Es ist besser, Inhalte mit jQuery und CSS wie folgt auszublenden:

function printDiv(selector) {
    $('body .site-container').css({display:'none'});
    var content = $(selector).clone();
    $('body .site-container').before(content);
    window.print();
    $(selector).first().remove();
    $('body .site-container').css({display:''});
}

Der div "site-container" enthält alle Sites, so dass Sie die Funktion wie folgt aufrufen können:

printDiv('.someDiv');
2
Alejo JM