printDiv (divId) : Eine verallgemeinerte Lösung zum Drucken von Div auf jeder Seite.
Ich hatte ein ähnliches Problem, wollte aber (a) die gesamte Seite drucken können oder (b) einen von mehreren spezifischen Bereichen drucken. Meine Lösung ermöglicht es Ihnen, dank vieler der oben genannten Punkte, jedes zu druckende div-Objekt anzugeben.
Der Schlüssel für diese Lösung besteht darin, dem Druckmedien-Stylesheet eine entsprechende Regel hinzuzufügen, damit das angeforderte div (und sein Inhalt) gedruckt werden.
Erstellen Sie zunächst die erforderliche Druck-CSS, um alles zu unterdrücken (jedoch ohne die spezifische Regel, die das zu druckende Element zulässt).
<style type="text/css" media="print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>
Beachten Sie, dass ich neue Klassenregeln hinzugefügt habe:
- Mit noprintarea können Sie das Drucken von Elementen in Ihrem Bereich sowohl des Inhalts als auch des Blocks unterdrücken.
- Mit noprintcontent können Sie das Drucken von Elementen in Ihrem Bereich unterdrücken. Der Inhalt wird unterdrückt, der zugewiesene Bereich bleibt jedoch leer.
- Mit "Drucken" können Elemente angezeigt werden, die in der gedruckten Version, jedoch nicht auf der Bildschirmseite angezeigt werden. Diese haben normalerweise "display: none" für den Bildschirmstil.
Fügen Sie dann drei JavaScript-Funktionen ein. Das erste schaltet lediglich das Stylesheet für Druckmedien ein und aus.
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
Der zweite erledigt die eigentliche Arbeit und der dritte räumt danach auf. Das zweite (printDiv) aktiviert das Druckmedien-Stylesheet, fügt dann eine neue Regel hinzu, damit das gewünschte Div gedruckt werden kann, gibt den Druck aus und fügt dann eine Verzögerung vor der endgültigen Verwaltung hinzu (andernfalls können die Stile zurückgesetzt werden, bevor der Druck tatsächlich erfolgt erledigt.)
function printDiv(divId)
{
// Enable the print CSS: (this temporarily disables being able to print the whole page)
disableSheet(0,false);
// Get the print style sheet and add a new rule for this div
var sheetObj=document.styleSheets[0];
var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
print();
// need a brief delay or the whole page will print
setTimeout("printDivRestore()",100);
}
Die letzten Funktionen löschen die hinzugefügte Regel und setzen den Druckstil erneut auf deaktiviert, damit die gesamte Seite gedruckt werden kann.
function printDivRestore()
{
// remove the div-specific rule
var sheetObj=document.styleSheets[0];
if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
else { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
// and re-enable whole page printing
disableSheet(0,true);
}
Das einzige andere, was Sie tun müssen, ist, Ihrer Onload-Verarbeitung eine Zeile hinzuzufügen, sodass der Druckstil zunächst deaktiviert wird, wodurch das Drucken ganzer Seiten ermöglicht wird.
<body onLoad='disableSheet(0,true)'>
Dann können Sie von überall in Ihrem Dokument ein Div drucken. Geben Sie einfach printDiv ("thedivid") über eine Schaltfläche oder was auch immer aus.
Ein großes Plus für diesen Ansatz ist die allgemeine Lösung für das Drucken ausgewählter Inhalte innerhalb einer Seite. Es ermöglicht auch die Verwendung vorhandener Stile für Elemente, die gedruckt werden - einschließlich des enthaltenen div.
HINWEIS: In meiner Implementierung muss dies das erste Stylesheet sein. Ändern Sie die Blattreferenzen (0) in die entsprechende Blattnummer, wenn Sie sie später in der Blattfolge vornehmen müssen.