it-swarm.com.de

Margin beim Drucken von HTML-Seite

Ich verwende ein separates Stylesheet zum Drucken. Ist es möglich, den rechten und linken Rand im Stylesheet festzulegen, der den Druckrand festlegt (d. H. Den Rand auf Papier)?.

Vielen Dank.

121
kobra

Sie sollten cm oder mm als Einheit verwenden, wenn Sie das Drucken angeben. Durch die Verwendung von Pixeln wird der Browser veranlasst, ihn in eine ähnliche Form zu übersetzen, wie er auf dem Bildschirm aussieht. Wenn Sie cm oder mm verwenden, wird eine konsistente Größe auf dem Papier sichergestellt.

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

Verwenden Sie für Schriftgrößen pt für das Druckmedium.

Beachten Sie, dass durch das Festlegen des Rands am Körper im CSS-Stil der Rand im Druckertreiber, der den druckbaren Bereich des Druckers definiert, nicht angepasst oder der Rand gesteuert wird über den Browser (kann in einigen Browsern in der Druckvorschau angepasst werden) ... Es wird nur der Rand des Dokuments im druckbaren Bereich festgelegt.

Sie sollten sich auch bewusst sein, dass IE7 ++ die Größe automatisch an die beste Anpassung anpasst und alles falsch macht, selbst wenn Sie cm oder mm verwenden. Um dieses Verhalten zu überschreiben, muss der Benutzer "Druckvorschau" auswählen und dann die Druckgröße auf 100% Setzen (Standard ist Shrink To Fit).

Eine bessere Option für die vollständige Kontrolle der gedruckten Ränder ist die Verwendung der Direktive @page, Um den Papierrand festzulegen, der sich auf den Papierrand außerhalb des HTML-Hauptteils auswirkt, der 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 mit Ausnahme von Safari.
In Internet Explorer wird der Rand in den Einstellungen für diesen Druck tatsächlich auf diesen Wert festgelegt. Wenn Sie Vorschau ausführen, wird dies standardmäßig angezeigt, der Benutzer kann dies 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;  
} 

Zugehörige Antwort: Deaktivieren der Browser-Druckoptionen (Kopfzeilen, Fußzeilen, Ränder) von der Seite?

220
awe

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

Eine Antwort von 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 jedoch dieses CSS für alle meine 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 Tabellen

Wenn ich eine Tabelle über mehrere Seiten drucken musste, wurde das margin:0 mit dem @page hat zu Blutungsrändern geführt:

bleeding edges

Ich könnte das lösen dank diese Antwort 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 }

Plus Einstellen der oberen und unteren Ränder für @page:

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

Ergebnis:

solved bleeding edges

Ich würde eher 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.

25
Kai Noack

Ich persönlich würde vorschlagen, eine andere Maßeinheit als px zu verwenden. Ich denke nicht, dass Pixel für den Druck von großer Relevanz sind. idealerweise würdest du verwenden:

  • punkt (pt)
  • zentimeter (cm)

Ich bin sicher, es gibt noch andere, und ein hervorragender Artikel über Print-CSS ist hier zu finden: Going to Print , von Eric Meyer .

9
David Thomas

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 verwenden Sie den folgenden Code, um Ränder, Höhe und Breite anzupassen.

Wenn Sie im A4-Format 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;
} 

dann erstelle ein Div mit all deinen Inhalten.

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

Ich empfehle auch pt gegen cm oder mm, da es genauer ist. Ich kann @page auch nicht zum Laufen bringen in Chrome (version 30.0.1599.69 m) Es ignoriert alles, was ich für die großen oder kleinen Ränder setze Ränder auf dem Dokument, komisch.

1
ironarm

Wenn Sie das Zielpapierformat kennen, können Sie Ihren Inhalt in eine DIV mit diesem bestimmten Format einfügen und dieser DIV einen Rand hinzufügen, um den Druckrand zu simulieren. Leider glaube ich nicht, dass Sie zusätzliche Kontrolle über die Druckfunktion haben, abgesehen davon, dass Sie nur das Druckdialogfeld anzeigen.

0
jonjbar