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.
Hier ist eine allgemeine Lösung, die Nur CSS was nachweislich funktioniert.
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}Alternative Ansätze sind nicht so gut. Verwendung von display ist knifflig, denn wenn ein Element display:none dann wird auch keiner seiner Nachkommen angezeigt. Um sie zu verwenden, müssen Sie die Struktur Ihrer Seite ändern.
Verwendung von visibility funktioniert besser, da Sie die Sichtbarkeit für Nachkommen einschalten können. Die unsichtbaren Elemente wirken sich aber immer noch auf das Layout aus, also verschiebe ich section-to-print oben links, damit es richtig gedruckt wird.
#section_to_print sollte besser funktionieren mit position:static; anstelle von position:absolute;
Dies ist bei weitem die schnellste und sauberste Methode. Ich frage mich, warum diese Antwort nicht die meisten Stimmen erhalten hat.
Ich habe eine bessere Lösung mit minimalem Code.
Platzieren Sie Ihren druckbaren Teil innerhalb eines div mit einer id wie dieser:
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />Dann fügen Sie ein Ereignis wie ein onclick (wie oben gezeigt), und übergeben Sie die id des div wie ich oben tat.
Nun wollen wir ein wirklich einfaches Javascript erstellen:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}Merken Sie, wie einfach das ist? Keine Popups, keine neuen Fenster, kein verrücktes Styling, keine JS-Bibliotheken wie Jquery. Das Problem mit wirklich komplizierten Lösungen (die Antwort ist nicht kompliziert und nicht das, worauf ich mich beziehe) ist die Tatsache, dass sie NIEMALS in alle Browser übersetzbar sind, niemals! Wenn Sie die Stile anders gestalten wollen, machen Sie es wie in der überprüften Antwort gezeigt, indem Sie das Media-Attribut zu einem Stylesheet-Link hinzufügen (media="print").
Kein Schnickschnack, leichtgewichtig, es funktioniert einfach.
@Kevin ich versuche dies für ein Formular, aber es wird ein leeres Formular gedruckt (ohne Daten) und ich brauche ein ausgefülltes Formular, das vor dem Absenden gedruckt wird
Das funktioniert in Fierfox und Chrome einwandfrei. Aus irgendeinem Grund bleibt der IE beim Öffnen und Aufschreiben des Inhalts hängen.
@Kevin: Tolle Lösung.. Allerdings erfasst sie nicht die Hintergrundfarben und -stile? Es wird nur einfacher Text gedruckt. Ist eine Änderung möglich, um auch die Farben und Stile zu erhalten?
Alle bisherigen Antworten sind ziemlich mangelhaft - sie beinhalten entweder das Hinzufügen von class="noprint" zu allem oder wird alles durcheinander bringen display innerhalb #printable .
Ich denke, die beste Lösung wäre, einen Wrapper für die nicht druckbaren Daten zu erstellen:
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>Natürlich ist dies nicht perfekt, da es bedeutet, dass Sie die Dinge in Ihrem HTML ein wenig verschieben müssen...
Ich denke, Sie haben Recht, aber wie kann ich das Styling der Tabelle, die das div umgibt, entfernen (wenn es möglich ist, das Styling zu entfernen - ich kann die Tabelle drucken und den Rest des Inhalts ganz einfach ausschließen
Ich bevorzuge die Verwendung von semantischem HTML. Die Druckformatierung sollte idealerweise über CSS erfolgen. Wie man das macht, steht in meiner Antwort: stackoverflow.com/questions/468881/
Der Trick besteht darin, es bei einem vom Benutzer erzeugten Ereignis wie einem Mausklick aufzurufen. Sie können auch nach der ersten Zeile hinzufügen: if(!w)alert('Bitte Pop-ups aktivieren');
Ich werde dies auf jeden Fall in mein Toolkit aufnehmen. Es ist eine schnelle und einfache Lösung.
Könnten Sie eine Druck-Stylesheet und CSS verwenden, um den gewünschten Inhalt zu gestalten? Diesen Artikel lesen für weitere Hinweise.
Ich habe eine Druckvorlage - ich versuche zu vermeiden, eine Stilregel in alle anderen Inhalte einzufügen...
Ich habe eine Tabelle mit Styling auf, containg die div in Frage, Wenn ich die Tabelle auf display:none - kann ich noch die div anzeigen?
Ich denke schon, und Sie könnten versuchen, die Regel als !wichtig zu markieren, um sie zu stärken!
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