Wie drucke ich das angegebene Div (ohne alle anderen Inhalte auf der Seite manuell zu deaktivieren)?
Ich möchte einen neuen Vorschaudialog vermeiden, so dass es nicht sinnvoll ist, ein neues Fenster mit diesem Inhalt zu erstellen.
Die Seite enthält mehrere Tabellen, von denen eine das Div enthält, das ich ausdrucken möchte - die Tabelle ist mit visuellen Stilen für das Web gestylt, die im Druck nicht angezeigt werden sollen.
Insgesamt hat mir keine dieser Antworten wirklich gefallen. Wenn Sie eine Klasse (sagen wir printableArea) und haben, dass als ein unmittelbares Kind von Körper, dann können Sie so etwas wie dieses in Ihrem Druck-CSS tun:
body > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}Für diejenigen, die printableArea an anderer Stelle suchen, müssen Sie sicherstellen, dass die Eltern von printableArea angezeigt werden:
body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}Die Verwendung der Sichtbarkeit kann zu einer Vielzahl von Abstandsproblemen und leeren Seiten führen. Das liegt daran, dass die Sichtbarkeit den Platz des Elements beibehält, es nur verbirgt, während die Anzeige es entfernt und anderen Elementen erlaubt, seinen Platz einzunehmen.
Der Grund, warum diese Lösung funktioniert, ist, dass Sie nicht alle Elemente greifen, sondern nur die unmittelbaren Kinder von body und sie ausblenden. Die anderen Lösungen unten mit display css, verstecken alle Elemente, die Auswirkungen alles innerhalb von printableArea Inhalt.
Ich würde kein Javascript vorschlagen, da Sie eine Druckschaltfläche benötigen, auf die der Benutzer klickt, und die Standard-Druckschaltflächen des Browsers hätten nicht die gleiche Wirkung. Wenn Sie das wirklich tun müssen, würde ich die HTML von body speichern, alle unerwünschten Elemente entfernen, drucken und dann die HTML wieder einfügen. Wie bereits erwähnt, würde ich dies jedoch vermeiden, wenn Sie können und verwenden Sie eine CSS-Option wie oben.
HINWEIS: Sie können beliebige CSS in das Druck-CSS einfügen, indem Sie Inline-Stile verwenden:
<style type="text/css">
@media print {
//styles here
}
</style>Oder, wie ich es normalerweise mache, ein Link-Tag:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Was ist, wenn das div, das Sie drucken möchten, nicht "ein unmittelbares Kind von body" ist? Ich versuche, dies in vue.js. zu tun. Aber ich bekomme eine Menge leere Seiten, wenn Sie die akzeptierte Antwort.
Hmm, noch, wenn ich dies versuchen, gibt es in der Tat keine zusätzlichen leeren Seiten, aber die printableArea div ist auch nicht angezeigt; Ich habe nur 1 leere leere Seite, wenn ich diesen Code verwenden.
Geben Sie dem Element, das Sie drucken möchten, die id printMe .
Fügen Sie dieses Skript in Ihren Head-Tag ein:
<script language="javascript">
var gAutoPrint = true;
function processPrint(){
if (document.getElementById != null){
var html = '<HTML>\n<HEAD>\n';
if (document.getElementsByTagName != null){
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0) html += headTags[0].innerHTML;
}
html += '\n</HE' + 'AD>\n<BODY>\n';
var printReadyElem = document.getElementById("printMe");
if (printReadyElem != null) html += printReadyElem.innerHTML;
else{
alert("Error, no contents.");
return;
}
html += '\n</BO' + 'DY>\n</HT' + 'ML>';
var printWin = window.open("","processPrint");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
if (gAutoPrint) printWin.print();
} else alert("Browser not supported.");
}
</script>Rufen Sie die Funktion
<a href="javascript:void(processPrint());">Print</a>
Schritt 1: Schreiben Sie das folgende Javascript in Ihren head-Tag
<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
docprint.document.write('<head><title>My Title</title>');
docprint.document.write('<style type="text/css">body{ margin:0px;');
docprint.document.write('font-family:verdana,Arial;color:#000;');
docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
docprint.document.write('a{color:#000;text-decoration:none;} </style>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>Schritt 2: Rufen Sie die Funktion PrintMe('DivID') über ein onclick-Ereignis auf.
<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>
Das ist es! Habe es für ein Modal und Gallerys verwendet. Keine Javascript-Fehler nach dem Schließen. Wirklich hilfreich, vor allem wenn man Modals verwendet, die länger als eine Seite sind. Schließt es schön ab. Perfekt für Leute, die drucken und speichern wollen.
<script type="text/javascript">
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
window.print();
document.body.innerHTML = originalContents;
}
</script>
Dies funktioniert nicht, wenn das Dokument nicht DIV-basiert ist oder #yourdiv auch weitere DIVs enthält.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
2 Stimmen
stackoverflow.com/questions/2255291/ dieser Link funktioniert perfekt