Ich habe die folgende CSS für meine Druckstil:ausblenden alle Elemente außer einem div für die Druckansicht
* {
display:none;
}
#printableArea {
display:block;
}
erwartete ich diese alle Elemente zu verbergen, und zeigen nur die Printablearea jedoch alles bekommt versteckt. In der Druckansicht bekomme ich nur eine leere Seite.
Ich habe es richtig in den Kopf, mit media="print" auf diesem bestimmten Stylesheet enthalten.
Wenn ein Element nicht angezeigt wird, wird keiner seiner untergeordneten Elemente angezeigt (unabhängig davon, für welche Anzeigeeigenschaft es festgelegt ist).
* entspricht dem <html> Element, so dass das gesamte Dokument ausgeblendet wird.
Sie müssen selektiver sein, was Sie verbergen.
html body * {
display:none;
}
#printableArea {
display:block;
}
Auch möglicherweise benötigen Sie eine wichtige auf #printableArea, aber wahrscheinlich nicht.
Dies funktioniert nur, wenn #printableArea ein direktes Kind des Körpers ist. –
Wenn Sie JavaScript verwenden möchten, können Sie diese einfach Schnipsel versuchen, die nicht einmal jQuery benötigt:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
Diese Aktion wird das gesamte HTML ersetzen, kein erforderliches Ergebnis –
Sie könnten versuchen, es auf alles oben knallen. Dies löste 90% meiner Probleme, dann musste ich einfach eine .noprint Klasse erstellen und sie zu einigen verstreuten Elementen hinzufügen.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
Sie nehmen den richtigen allgemeinen Ansatz, aber Sie wollen visibility: hidden statt verwenden display: none, so dass Sie Kind-Elemente sichtbar sein einstellen.
Ah, danke! Ich denke, ich könnte printableArea einfach außerhalb des Seitenwrappers platzieren und dann den Wrapper ausblenden. – FatherCarbon
@FatherCarbon - das ist, was ich gerade implementiert habe und es sieht so aus, als würde es den Trick gut machen – Michael12345