Rand beim Drucken der HTML-Seite

Ich verwende ein separates Stylesheet zum Drucken. Ist es möglich, den rechten und linken Rand im Stylesheet festzulegen, die den Druckrand festlegen (dh den Rand auf Papier)?

Vielen Dank.

Sie sollten cmoder mmals Einheit verwenden, wenn Sie zum Drucken angeben. Wenn Sie Pixel verwenden, übersetzt der Browser diese in etwas Ähnliches, wie es auf dem Bildschirm aussieht. Verwenden cmoder mmgewährleisten Sie eine gleichmäßige Papiergröße.

body
{
  margin: 25mm 25mm 25mm 25mm;
}

Verwenden Sie ptfür Schriftgrößen die Druckmedien.

Beachten Sie, dass der Marge auf dem Körper in CSS Stil Einstellung wird nicht den Marge im Druckertreiber einstellen, um den Druckbereich des Druckers definiert, oder Marge durch den Browser gesteuert (kann in Druckvorschau auf einigen Browsern einstellbar sein) ... Es Legt nur den Rand des Dokuments im druckbaren Bereich fest.

Sie sollten sich auch darüber im Klaren sein, dass IE7 ++ die Größe automatisch an die beste Anpassung anpasst und dazu führt, dass alles falsch ist, selbst wenn Sie cmoder verwenden mm. Um dieses Verhalten zu überschreiben, muss der Benutzer "Druckvorschau" auswählen und dann die Druckgröße auf 100%(Standard ist Shrink To Fit) einstellen .

Eine bessere Option für die vollständige Kontrolle über gedruckte Ränder besteht darin, mithilfe der @pageAnweisung den Papierrand festzulegen, der sich auf den Rand auf Papier außerhalb des HTML-Body-Elements auswirkt, das normalerweise vom Browser gesteuert wird. Siehe http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Dies funktioniert derzeit in allen gängigen Browsern außer Safari.
Im Internet Explorer wird der Rand in den Einstellungen für diesen Druck tatsächlich auf diesen Wert festgelegt. Wenn Sie die Vorschau ausführen, wird dies standardmäßig angezeigt, der Benutzer kann ihn jedoch in der Vorschau ändern.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

Verwandte Antwort: Deaktivieren der Browserdruckoptionen (Kopf- und Fußzeilen, Ränder) von der Seite?

Zunächst versuche ich, alle meine Benutzer zu zwingen, Chrome beim Drucken zu verwenden, da andere Browser andere Layouts erstellen.

Eine Antwort auf diese Frage empfiehlt:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

Am Ende habe ich dieses CSS jedoch für alle zu druckenden Seiten verwendet:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}

Sonderfall: Lange Tische

Wenn ich eine Tabelle über mehrere Seiten drucken musste, führte das margin:0mit @pagezu blutenden Kanten:

Ich könnte dies dank dieser Antwort lösen mit:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

Stellen Sie außerdem die oberen und unteren Ränder ein für @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

Ergebnis:

Ich würde lieber eine Lösung bevorzugen, die prägnant ist und mit allen Browsern funktioniert. Im Moment hoffe ich, dass die obigen Informationen einigen Entwicklern bei ähnlichen Problemen helfen können.

Aktualisierte, einfache Lösung

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

Alte Lösung

Erstellen Sie mit jeder Seite einen Abschnitt und passen Sie mit dem folgenden Code Ränder, Höhe und Breite an.

Wenn Sie im Format A4 drucken.

Dann Benutzer

Größe: 8,27 Zoll und 11,69 Zoll

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

Erstellen Sie dann ein Div mit all Ihren Inhalten.

<div class="Section1"> 
    type your content here... 
</div>

Ich persönlich würde vorschlagen, eine andere Maßeinheit als zu verwenden px. Ich denke nicht, dass Pixel eine große Relevanz für den Druck haben. Idealerweise würden Sie verwenden:

• Punkt (pt)
• Zentimeter (cm)

Ich bin mir sicher, dass es noch andere gibt, und einen ausgezeichneten Artikel über Print-CSS finden Sie hier: Going to Print von Eric Meyer .

Ich empfehle auch pt versus cm oder mm, da es genauer ist. Außerdem kann ich @page in Chrome nicht zum Laufen bringen (Version 30.0.1599.69 m). Es ignoriert alles, was ich für die großen oder kleinen Ränder eingefügt habe. Aber Sie können es dazu bringen, mit den Körperrändern des Dokuments zu arbeiten, komisch.

Wenn Sie das Zielpapierformat kennen, können Sie Ihren Inhalt in einem DIV mit diesem bestimmten Format platzieren und diesem DIV einen Rand hinzufügen, um den Druckrand zu simulieren. Leider glaube ich nicht, dass Sie zusätzliche Kontrolle über die Druckfunktion haben, außer nur das Druckdialogfeld anzuzeigen.