Erfahren Sie, wie Sie mit CSS eine Druckseite erstellen

Verwenden Sie CSS, um eine Druckseite zu erstellen. Sie müssen keine HTML-Datei speziell zum Drucken erstellen, was etwas Energie sparen kann. Voraussetzung ist, dass Sie CSS + p verwenden, um die HTML-Seite gemäß dem „WEB-Standard“ zu gestalten.

Fügen Sie zunächst den CSS-Dateisatz für den Drucker zur HTML-Seite hinzu

<link href="css/admin.css" rel="stylesheet" type="text/css" media="screen" />	
<link href="css/admin-print.css" rel="stylesheet" type="text/css" media="print" />

media="screen" ist bildschirmorientiert;

media="print" dient zum Drucken;

Zweitens: Erstellen Sie eine Druckversion der Seite und entfernen Sie unnötige Seitenelemente wie Navigation, Seitenleisten, Werbung, Urheberrechte usw. Zu diesem Zeitpunkt kann der Vorteil der Erstellung von Seiten gemäß „WEB-Standards“ zum Ausdruck gebracht werden. Es ist einfach, das Layout mit CSS zu ändern.

/* 隐藏不打印项 start */
h1 span {    /* 副标题 */
 display: none;  
}
#sidebar {   /* 侧栏 */
 display: none;
}		
#content td.ads {  /* 表格内广告 */
 display: none;
}		
#content th.col2 span {  /* 锚链接 */
 display: none;
}		
#content #bottom-2 {  /* 页尾表格打印 */
 display: none;
}		
/* 隐藏不打印项 end */

Drittens kann die Druckschaltflächenfunktion in IE und Firefox normal drucken.

<input type=button value="打 印 本 页" onclick="window.print()">

Darüber hinaus gibt es eine lokale Version der Druckseite, die „Druckeinstellungen“ und „Druckvorschau“ ermöglicht. Aufgrund dieser Einstellung muss für den Netzwerkdruck jedoch ein Steuerelement im IE-Browser und die Sicherheit des ActiveX aufgerufen werden Die Steuerung muss reduziert werden und kann nur im IE verwendet werden. Das Ausführen darauf ist nicht praktikabel. Deshalb poste ich den Aufrufcode nur zur Sicherung.

<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0> </OBJECT>
<input type=button value="打印预览" onclick=document.all.WebBrowser.ExecWB(7,1)>
<input type=button value="页面设置" onclick=document.all.WebBrowser.ExecWB(8,1)>
<input type=button value="打印本页" onclick=document.all.WebBrowser.ExecWB(6,1)>

Viertens: Dinge, die es zu beachten gilt

Bei Druckstilen wird die Druckschriftgröße in Punkt (pt) gemessen, und für die Anzeige der Schriftgröße auf dem Bildschirm sind Pixel (px) besser geeignet als Punkte und Fuß.

Bei Druckstilen kann das Float-Attribut von CSS manchmal Probleme verursachen und dazu führen, dass die gedruckte Seite fehlt. Versuchen Sie daher, unnötige Anzeige auf Blockebene zu entfernen.

In Bezug auf Druckeinstellungen und das Anpassen von Kopf- und Fußzeilen habe ich einige Informationen überprüft und festgestellt, dass CSS und HTML nicht gesteuert werden können und nur durch den Aufruf von ActiveX-Steuerelementen erreicht werden können, dies ist jedoch nicht sicher. Am besten klicken Sie vor dem Drucken auf das Browsermenü, um die Druckeinstellungen selbst festzulegen.

Es gibt auch ein Tag in CSS, das Seitenumbrüche festlegen kann: „page-break-after“ und „page-break-before“. Da meine Feiertagsseite viele Tabellen enthält, habe ich dieses CSS nicht angewendet. Sie können den spezifischen Effekt selbst testen.

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie mit CSS eine Druckseite erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!