Wie lässt sich der Inhalt eines DIV am besten ausdrucken?
Antworten
Zu viele Anzeigen?
Leichte Änderungen gegenüber früherer Version - getestet auf CHROME
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
BC.
Punkte
23018
Ich denke, es gibt eine bessere Lösung. Machen Sie Ihre div zu drucken decken das gesamte Dokument, aber nur, wenn es gedruckt wird:
@media print {
.myDivToPrint {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 18px;
}
}
Erik
Punkte
814
Dies wurde zwar von @gabe , Wenn Sie jQuery verwenden, können Sie meine printElement Plugin.
Es gibt ein Beispiel aquí und weitere Informationen über das Plugin aquí .
Die Verwendung ist ziemlich einfach, greifen Sie einfach ein Element mit einem jQuery-Selektor und drucken Sie es:
$("#myDiv").printElement();Ich hoffe, es hilft!
Gary Hayes
Punkte
1661
Mit Jquery verwenden Sie einfach diese Funktion:
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>Ihre Druckschaltfläche sieht dann so aus:
<button id="print" onclick="printContent('id name of your div');" >Print</button>Bearbeiten: Wenn Sie Formulardaten haben, die Sie beibehalten müssen, kopiert Clone diese nicht, so dass Sie einfach alle Formulardaten erfassen und nach der Wiederherstellung so ersetzen müssen:
<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>
Robert
Punkte
1972
I verwendet Bill Paetzke Antwort zum Drucken eines Divs mit Bildern, aber es funktioniert nicht mit Google Chrome
Ich musste nur diese Zeile hinzufügen myWindow.onload=function(){ damit es funktioniert, und hier ist der vollständige Code
<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.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</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>auch wenn jemand nur ein div mit id ausdrucken muss, braucht er kein jquery zu laden
Hier ist reiner Javascript-Code, um dies zu tun
<html>
<head>
<script type="text/javascript">
function PrintDiv(id) {
var data=document.getElementById(id).innerHTML;
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.document.close(); // necessary for IE >= 10
myWindow.onload=function(){ // necessary if the div contain images
myWindow.focus(); // necessary for IE >= 10
myWindow.print();
myWindow.close();
};
}
</script>
</head>
<body>
<div id="myDiv">
This will be printed.
<img src="image.jpg"/>
</div>
<div>
This will not be printed.
</div>
<div id="anotherDiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintDiv('myDiv')" />
</body>
</html>Ich hoffe, dies kann jemandem helfen
- See previous answers
- Weitere Antworten anzeigen
