Wie lässt sich der Inhalt eines DIV am besten ausdrucken?
Antworten
Zu viele Anzeigen?
huston007
Punkte
1944
Von hier aus https://forums.asp.net/t/1261525.aspx
<html>
<head>
<script language="javascript">
function printdiv(printpage) {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}
</script>
<title>div print</title>
</head>
<body>
//HTML Page //Other content you wouldn't like to print
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">
<div id="div_print">
<h1 style="Color:Red">The Div content which you want to print</h1>
</div>
//Other content you wouldn't like to print //Other content you wouldn't like to print
</body>
</html>
Techie
Punkte
43452
function printdiv(printdivname) {
var headstr = "<html><head><title>Booking Details</title></head><body>";
var footstr = "</body>";
var newstr = document.getElementById(printdivname).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr+footstr;
window.print();
document.body.innerHTML = oldstr;
return false;
}Dies druckt die div und stellen Sie den Inhalt wieder so ein, wie er vorher war. printdivname es el div gedruckt werden.
Carl Russmann
Punkte
1709
Erstellen Sie ein separates Druck-Stylesheet, das alle anderen Elemente außer dem zu druckenden Inhalt ausblendet. Markieren Sie es mit 'media="print" wenn Sie es laden:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
So können Sie für Ausdrucke ein völlig anderes Stylesheet laden.
Wenn Sie erzwingen möchten, dass der Druckdialog des Browsers für die Seite angezeigt wird, können Sie dies beim Laden mit JQuery so tun:
$(function() { window.print(); });
oder durch ein beliebiges anderes Ereignis ausgelöst werden, z. B. wenn ein Benutzer auf eine Schaltfläche klickt.
dors
Punkte
1042
Meines Erachtens haben die bisher vorgeschlagenen Lösungen folgende Nachteile:
- Die CSS-Media-Query-Lösungen gehen davon aus, dass es nur ein div zu drucken gibt.
- Die Javascript-Lösungen funktionieren nur auf bestimmten Browsern.
- Wenn Sie den Inhalt des übergeordneten Fensters zerstören und neu erstellen, entsteht ein Chaos.
Ich habe die obigen Lösungen verbessert. Hier ist etwas, das ich getestet habe und das mit den folgenden Vorteilen wirklich gut funktioniert.
- Funktioniert in allen Browsern, einschließlich IE, Chrome, Safari und Firefox.
- Das übergeordnete Fenster wird nicht zerstört und neu geladen.
- Kann eine beliebige Anzahl von DIV's auf einer Seite drucken.
- Verwendet HTML-Schablonen, um eine fehleranfällige String-Verkettung zu vermeiden.
Wichtige Punkte:
- Sie müssen ein onload="window.print()" für das neu erstellte Fenster haben.
- Rufen Sie nicht targetwindow.close() oder targetwindow.print() von der übergeordneten Anwendung aus auf.
- Stellen Sie sicher, dass Sie targetwindow.document.close() und target.focus() ausführen.
- Ich benutze Jquery, aber Sie können die gleiche Technik mit einfachen Javascript als gut tun.
-
Sie können dies hier in Aktion sehen https://math.tools/table/multiplication . Sie können jede Tabelle einzeln ausdrucken, indem Sie auf die Schaltfläche "Drucken" in der Kopfzeile der Box klicken.
<script id="print-header" type="text/x-jquery-tmpl"> <html> <header> <title>Printing Para {num}</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> body { max-width: 300px; } </style> </header> <body onload="window.print()"> <h2>Printing Para {num} </h2> <h4>https://math.tools</h4> </script> <script id="print-footer" type="text/x-jquery-tmpl"> </body> </html> </script> <script> $('.printthis').click(function() { num = $(this).attr("data-id"); w = window.open(); w.document.write( $("#print-header").html().replace("{num}",num) + $("#para-" + num).html() + $("#print-footer").html() ); w.document.close(); w.focus(); //w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window. ///w.close(); Don't do this otherwise chrome won't work }); </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a> <a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a>
<p class="para" id="para-1"> Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="para" id="para-2"> Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Jason
Punkte
7384
